CSS技巧：如何实现超出部分显示省略号

IOQD • 2024-10-24 15:28 • 编程

一、为什么超出部分需要显示省略号？

当内容超出父容器的宽度或高度时，我们往往需要将超出的部分进行裁剪，并显示省略号，以提示用户该容器内还有更多的内容，需要进行查看。比如在新闻列表中，超出部分的标题需要进行省略，只显示部分内容。

二、如何实现超出部分显示省略号？

在CSS中，我们可以使用text-overflow属性来实现该功能。text-overflow属性控制元素内文本溢出时的显示方式。常见的属性值有：

clip：超出部分隐藏
ellipsis：超出部分显示省略号

其中，使用ellipsis属性值可以实现超出部分显示省略号的效果。

三、在单行显示文本中应用text-overflow: ellipsis

在单行显示文本中，我们可以将text-overflow: ellipsis应用于文本容器上，以实现超出部分显示省略号的效果。如下代码所示：

  
.single-line-ellipsis {
  overflow: hidden; /* 超出部分隐藏 */
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

当文本容器的宽度不足以显示文本全部内容时，超出部分将会显示省略号。

四、在多行显示文本中应用text-overflow: ellipsis

但是，如果我们要实现在多行显示文本时的省略号效果，只使用text-overflow: ellipsis是无法实现的，需要通过其他方式进行实现。

一种解决方案是使用webkit-line-clamp属性。该属性只适用于webkit内核浏览器，通过指定一个数值，实现文本行数的控制。与此同时，还需要将文本容器的高度进行设定，以确定超出部分的显示位置。代码如下：

  
.multi-line-ellipsis {
  display: -webkit-box; /* 基于块级元素的flex布局 */
  -webkit-box-orient: vertical; /* 设置为垂直方向 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  -webkit-line-clamp: 3; /* 控制文本行数为3行 */
  line-height: 1.5; /* 行高 */
  height: 4.5em; /* 设定文本容器的高度为3行的高度 */
}

通过上述代码，实现了多行文本的溢出部分显示省略号的效果。

五、结语

通过对text-overflow属性的简单应用，我们可以实现超出部分显示省略号的效果。不过，在多行显示文本时，需要使用webkit-line-clamp属性进行，但是该属性只适用于webkit内核的浏览器。因此，在实际开发中，需要根据项目需要以及浏览器兼容性进行选择使用。

原创文章，作者：IOQD，如若转载，请注明出处：https://www.506064.com/n/144232.html