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

梦溪

发布于 2021-09-08 11:11:00

2.5K0

发布于 2021-09-08 11:11:00

文章被收录于专栏：梦溪博客

在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 月，如有侵权请联系 cloudcommunity@tencent.com 删除

html