宽度后的 CSS 文本省略 - CSS

在前端开发中，有时候需要对长文本进行省略处理，以适配页面布局。CSS 提供了 text-overflow 属性来实现这一功能。但该属性只能针对单行文本进行省略，如果需要对多行文本进行省略，需要借助 display 和 overflow 属性的配合。

单行文本的省略

对于单行文本，我们可以使用以下 CSS 来进行省略：

/* 必须设置宽度 */
width: 100px;
/* 超出部分使用省略号 */
overflow: hidden;
text-overflow: ellipsis;
/* 确保在同一行内显示文本 */
white-space: nowrap;

• width：必须设置元素的宽度才能进行省略。
• overflow：超出部分隐藏。
• text-overflow: ellipsis;：使用省略号省略超出部分。
• white-space: nowrap;：确保在同一行内显示文本。

多行文本的省略

对于多行文本，我们可以使用以下 CSS 来进行省略：

/* 定义元素的最大高度和行数 */
max-height: 80px;
/* 超出部分隐藏 */
overflow: hidden;
/* 当超出部分隐藏时，使用省略号 */
text-overflow: ellipsis;
/* 显示全部文本，但超出部分不显示 */
display: -webkit-box;
/* 定义行数 */
-webkit-line-clamp: 3;
/* 定义行内元素的排列方向 */
-webkit-box-orient: vertical;

• max-height：定义元素的最大高度。
• overflow：超出部分隐藏。
• text-overflow: ellipsis;：使用省略号省略超出部分。
• display: -webkit-box;：显示全部文本，但超出部分不显示。需要加上 -webkit 前缀以适配不同浏览器。
• -webkit-line-clamp: 3;：定义元素的行数。
• -webkit-box-orient: vertical;：定义行内元素的排列方向。

需要注意的是，上述 CSS 代码中使用了 -webkit 前缀，是因为该方法在不同浏览器中可能会有兼容性问题。可将代码加上前缀以适配不同浏览器。

以上即为单行文本和多行文本的省略实现方式。在实际开发中，根据实际情况选择合适的方式进行使用。