css文字内容省略[...]

一拳莫敌

已于 2024-06-03 10:10:19 修改

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签： css html 前端

于 2022-09-28 17:48:25 首次发布

本文链接：https://blog.csdn.net/qq_40660389/article/details/127094031

本文介绍如何使用CSS的text-overflow属性结合white-space和overflow来实现文本溢出时显示省略号的效果。此外还提供了多行文本溢出显示省略号的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在CSS中，如果您想要对过长的文本进行省略并显示省略号（…），可以使用text-overflow属性，通常与white-space和overflow属性一起使用。下面是一个简单的例子，展示了如何实现文本的省略显示：

.ellipsis {
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}

在HTML中使用这个类：

<div class="ellipsis" style="width: 200px;">这是一段非常长的文本，它超出了容器的宽度。</div>

在这个例子中，任何超出div元素宽度的文本都将被替换为省略号。

请注意，这种方法只适用于单行文本。如果您希望多行文本也能显示省略号，可以使用-webkit-line-clamp属性，但这是一个非标准的、仅在部分浏览器中有效的解决方案：

.multi-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 限制在3行 */
  overflow: hidden;
  text-overflow: ellipsis;
}

在HTML中使用这个类：

<div class="multi-ellipsis" style="width: 200px;">这是一段非常长的文本，它超出了容器的宽度。这段文本有很多内容，但是我们只希望显示前三行，并且如果文本超出了这三行，就显示省略号。</div>

在这个例子中，文本将被限制在3行内，如果超出，则显示省略号。请注意，这种方法主要在基于WebKit的浏览器上有效，如Chrome和Safari。