【CSS】文本溢出省略的两种方式-编程知识

【CSS】文本溢出省略的两种方式

假设有一个卡片组件，组件里的内容有长有短，我们希望在内容很长的时候省略文字，以保证卡片的高度不会过高。
在这里插入图片描述

单行文本

要实现在文字超出时不显示超出部分，并用省略号表示还有更多文字，需要使用 CSS 的 text-overflow、white-space 和 overflow 属性。

完整的 .content css:

.content {max-height: 500px;margin-bottom: 8px;word-break: break-all;display: block;overflow: hidden; /* 确保内容超出时隐藏 */font-weight: 500;font-size: 14px;line-height: 140%;padding: 5px;color: #333;margin-bottom: 100px;/* 新增以下属性 */text-overflow: ellipsis; /* 超出部分显示为省略号 */white-space: nowrap; /* 保持内容在一行显示，如果需要多行，可以移除这行 */
}

这段代码中，overflow: hidden; 保证了内容超出部分会被隐藏，而 text-overflow: ellipsis; 则会在超出部分的末尾添加省略号。

然而，这段代码仅对单行文本起作用，在我们这个例子中，他是没有用的。

多行文本

使用 -webkit-line-clamp

最简单的方法是使用非标准的 -webkit-line-clamp 属性，它在大多数现代浏览器中都得到了支持。这个属性允许您指定显示的行数，并在超出这个行数时显示省略号。但请注意，这是一个非标准的、只在 WebKit/Blink 引擎（如 Chrome、Safari、新版 Edge）中有效的属性。

.content {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; /* 指定显示的行数 */overflow: hidden;text-overflow: ellipsis;max-height: 500px;margin-bottom: 8px;word-break: break-all;font-weight: 500;font-size: 14px;line-height: 140%;padding: 5px;color: #333;margin-bottom: 100px;
}