本文旨在解决css中多行文本截断时避免显示省略号的问题。通过放弃传统的`-webkit-line-clamp`和`text-overflow: ellipsis`组合，转而利用css变量精确计算容器高度，并结合`overflow: hidden`属性，实现文本在指定行数后被干净利落地截断，不留任何省略号，提供了一种简洁有效的纯css解决方案。
在网页设计中，为了保持布局的整洁和一致性，我们经常需要对过长的文本进行截断。对于单行文本，text-overflow: ellipsis配合overflow: hidden和white-space: nowrap可以很好地实现带省略号的截断。然而，当涉及到多行文本时，情况变得稍复杂。虽然-webkit-line-clamp属性提供了一种方便的带省略号的多行文本截断方案，但其默认行为是显示省略号。很多场景下，设计师或产品经理可能希望文本在达到指定行数后直接被截断，而不显示任何省略号，以保持视觉上的简洁。
核心原理
要实现多行文本截断且不显示省略号，关键在于精确控制文本容器的高度，使其恰好等于指定行数的总高度。一旦文本内容超出这个计算出的高度，我们就利用overflow: hidden属性将其隐藏，从而达到截断的效果，且由于没有使用text-overflow: ellipsis，也就不会出现省略号。
这种方法的优势在于其纯CSS实现，无需JavaScript，且兼容性良好。它通过以下几个步骤实现：
- 确定单行文本高度： 通过line-height属性定义每行文本的高度。
- 计算容器总高度： 将单行文本高度乘以所需行数，得到容器的最终高度。
- 隐藏溢出内容： 使用overflow: hidden隐藏超出容器高度的文本。
实现方法
下面我们将通过一个具体的代码示例来展示如何实现这一功能。
立即学习“前端免费学习笔记（深入）”；
1. 定义CSS变量和单行高度
为了使代码更具可维护性和灵活性，我们可以使用CSS自定义属性（变量）来定义单行高度。
.truncateText {
--h: 1.2em; /* 定义一个CSS变量--h，表示单行文本的高度 */
line-height: var(--h); /* 将单行高度应用于line-height属性 */
/* ...其他样式 */
}这里，1.2em是一个示例值，你可以根据实际的字体大小和设计需求进行调整。em单位是相对于父元素的字体大小，因此可以保持相对性。
2. 计算容器总高度
假设我们希望文本在三行后被截断。那么，容器的总高度就应该是三倍的单行高度。我们可以使用CSS的calc()函数来完成这个计算。
.truncateText {
--h: 1.2em; /* 单行文本高度 */
line-height: var(--h); /* 应用单行高度 */
height: calc(3 * var(--h)); /* 计算并设置容器总高度为3行 */
/* ...其他样式 */
}3. 隐藏溢出内容
最后一步是确保超出计算高度的文本被隐藏。
.truncateText {
--h: 1.2em; /* 单行文本高度 */
line-height: var(--h); /* 应用单行高度 */
height: calc(3 * var(--h)); /* 计算并设置容器总高度 */
overflow: hidden; /* 隐藏超出容器高度的内容 */
width: 100px; /* 示例宽度，可根据需要调整 */
border: 1px solid red; /* 示例边框，用于可视化 */
}完整示例代码
结合HTML结构，完整的实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多行文本无省略号截断</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.truncateText {
--h: 1.2em; /* 定义单行文本高度变量 */
line-height: var(--h); /* 应用单行高度 */
height: calc(3 * var(--h)); /* 计算容器总高度为3行 */
width: 200px; /* 容器宽度 */
border: 1px solid #ccc; /* 示例边框 */
overflow: hidden; /* 隐藏超出容器高度的内容 */
background-color: #f9f9f9;
padding: 5px;
}
.originalText {
margin-top: 30px;
width: 200px;
border: 1px solid blue;
padding: 5px;
background-color: #e0f7fa;
}
</style>
</head>
<body>
<h1>多行文本无省略号截断示例</h1>
<p>以下是截断后的文本（3行，无省略号）：</p>
<div class="truncateText">
这是一段非常长的文本，它需要被截断，但我们不希望在截断的地方看到三个点（省略号）。
通过精确计算容器的高度，我们可以在第三行之后直接切断文本，保持界面的整洁。
这个方法适用于那些对视觉一致性要求较高的场景。
即使文本再长，也只会显示前三行的内容。
</div>
<p class="originalText">以下是原始文本（用于对比）：</p>
<div class="originalText">
这是一段非常长的文本，它需要被截断，但我们不希望在截断的地方看到三个点（省略号）。
通过精确计算容器的高度，我们可以在第三行之后直接切断文本，保持界面的整洁。
这个方法适用于那些对视觉一致性要求较高的场景。
即使文本再长，也只会显示前三行的内容。
</div>
</body>
</html>注意事项
- line-height的稳定性： 这种方法高度依赖于line-height的准确性。确保line-height是一个固定值（如em、px或无单位数值），而不是normal，否则计算出的高度可能不准确。
- 字体大小变化： 如果文本的font-size发生变化，而line-height是基于em单位，那么--h变量可能需要重新评估，或者确保--h也动态适应font-size。
- 非等宽字体： 对于某些语言或特殊字符，如果使用非等宽字体，即使line-height固定，每行实际占用的垂直空间也可能略有差异，但通常情况下，这种差异对视觉效果影响不大。
-
与-webkit-line-clamp的对比：
- -webkit-line-clamp 优点是实现简单，自动处理省略号，但兼容性主要限于WebKit内核浏览器，且无法禁用省略号。
- 本教程方法 优点是纯CSS实现，兼容性好，且可以完全控制是否显示省略号。缺点是需要精确计算高度，如果line-height或font-size动态变化，需要相应调整CSS变量。
- 可访问性： 被截断的内容是完全隐藏的，屏幕阅读器可能无法访问。如果被截断的内容对用户理解非常重要，应考虑提供“查看更多”等交互方式。
总结
通过巧妙地利用CSS变量和calc()函数，我们可以精确控制多行文本容器的高度，并结合overflow: hidden属性，实现多行文本的无省略号截断。这种方法提供了一种纯CSS的、兼容性良好的解决方案，特别适用于那些对视觉简洁性有严格要求的场景。理解其核心原理和注意事项，将有助于开发者在不同的项目需求中灵活运用。
