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


<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>


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

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

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

最后修改:2021 年 09 月 06 日
如果觉得我的文章对你有用,请随意赞赏