📜  文本溢出:省略号; 2 行 - CSS (1)

📅  最后修改于: 2023-12-03 14:55:03.064000             🧑  作者: Mango

文本溢出:省略号; 2 行 - CSS

简介

当文本内容过长时,我们往往需要对其进行省略处理。CSS提供了多种方式实现文本溢出的省略显示,其中最常用的方式是使用省略号。本文将介绍如何使用CSS实现文本的省略显示,并且仅显示 2 行内容。

实现方式
text-overflow: ellipsis

text-overflow是CSS中一个用于控制文本展示样式的属性。其可以用于省略文本,并显示省略号。

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

这种方式只需要三行代码即可实现,但是只能控制行内元素的省略显示效果,并且无法控制省略的行数。

line-clamp

line-clamp是CSS中用于控制文本行数的属性,当文本内容超出指定行数时,将会被省略并添加省略号。但是该属性只能用于块级元素。

.ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;  /* 显示 2 行 */
    overflow: hidden;      /* 超出部分隐藏 */
}

这种方式可以控制文本行数,并且控制究竟需要显示几行,但是需要注意的是,该方式只支持webkit内核的浏览器。

两者结合使用

当需要同时控制文本行数和省略显示时,我们可以将上述两种方式进行结合使用。

.ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;  /* 显示 2 行 */
    white-space: normal;   /* 允许换行 */
    overflow: hidden;      /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 省略号 */
}

这种方式,既可以控制文本行数,又可以显示省略号。

结语

以上三种方式都可以实现文本的省略显示,并且该功能在实际开发中经常用到。在选择实现方式时,需要根据实际情况进行选择,选择最合适的方式。