文本溢出，HTML页面如何让多出的文字显示省略号

在html页面中经常会遇到文本显示框太小，无法显示出全部文字，但如果直接切掉又会很难看，这里教大家使用text-overflow: ellipsis的属性解决文本溢出问题。

代码语言：javascript复制

<style> 
p.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

代码语言：javascript复制

<h1>text-overflow 属性</h1>
<p>以下两段包含不适合其框的长文本。</p>

<h2>text-overflow: clip:</h2>
<p class="test1">这里有一些无法容纳在框中的长文本</p>

<h2>text-overflow: ellipsis:</h2>
<p class="test2">这里有一些无法容纳在框中的长文本</p>

html overflow text

0 人点赞