本文详细介绍了如何在css中实现多行文本的精确截断，同时避免显示传统的省略号。通过巧妙结合`line-height`和`height`属性进行计算，并配合`overflow: hidden`，开发者可以实现对文本显示行数的精准控制，从而提供更简洁的界面视觉效果，避免了`text-overflow: ellipsis`带来的默认省略符。
传统多行文本截断方法的局限性
在CSS中实现多行文本截断，开发者通常会想到使用display: -webkit-box结合-webkit-line-clamp和-webkit-box-orient: vertical。这种方法确实能方便地限制文本行数，但它通常与overflow: hidden和text-overflow: ellipsis一同使用，其中text-overflow: ellipsis正是导致文本末尾出现省略号（...）的原因。
例如，以下代码尝试截断文本并隐藏省略号，但由于text-overflow: ellipsis;的存在，省略号依然会显示：
<style>
.truncateText{
height: auto; /* 这里高度自适应，但实际截断由-webkit-line-clamp控制 */
width: 100px;
border: 1px solid red;
display: -webkit-box;
-webkit-line-clamp: 3; /* 限制为3行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; /* 导致出现省略号 */
}
</style>
<div class="truncateText">
This long text needs to be truncated without the three dots. This is a very long sentence that will definitely exceed three lines if not truncated.
</div>如果我们希望实现多行文本截断，但又不想显示省略号，就需要采用一种不同的策略。
无省略号多行文本截断的解决方案
要实现无省略号的多行文本截断，核心思路是精确计算出指定行数文本所需的高度，然后将容器的高度设置为这个精确值，并隐藏溢出内容。这样，文本会在达到容器高度时被“裁剪”掉，而不会触发text-overflow: ellipsis。
立即学习“前端免费学习笔记（深入）”；
实现原理
- 定义单行文本高度： 通过line-height属性明确指定每一行文本的高度。为了方便管理，可以使用CSS变量。
- 计算总高度： 根据期望的行数，将单行文本高度乘以行数，得到容器的最终高度。
- 隐藏溢出内容： 使用overflow: hidden属性确保超出计算高度的文本内容被隐藏。
示例代码
以下是实现无省略号多行文本截断的CSS和HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS多行文本无省略号截断</title>
<style>
.truncateText {
--line-height-unit: 1.2em; /* 定义单行文本的高度单位，可根据字体大小调整 */
line-height: var(--line-height-unit); /* 设置每一行文本的实际高度 */
height: calc(3 * var(--line-height-unit)); /* 计算3行文本的总高度 */
width: 100px; /* 容器宽度 */
border: 1px solid red; /* 边框，用于可视化容器 */
overflow: hidden; /* 隐藏超出容器高度的内容 */
/* 注意：这里没有使用 text-overflow: ellipsis; */
}
/* 仅为演示效果添加一些通用样式 */
body {
font-family: sans-serif;
padding: 20px;
}
</style>
</head>
<body>
<h1>无省略号多行文本截断演示</h1>
<div class="truncateText">
This long text needs to be truncated without the three dots. This is a very long sentence that will definitely exceed three lines if not truncated. We want to see it cut off cleanly.
</div>
<p style="margin-top: 20px;">这是一个对比文本，用于说明效果。</p>
</body>
</html>在上述代码中：
- --line-height-unit: 1.2em; 定义了一个CSS变量，用于控制单行文本的高度。1.2em是一个相对单位，通常能很好地适应当前字体大小。
- line-height: var(--line-height-unit); 将元素的行高设置为这个变量值。这是计算的基础。
- height: calc(3 * var(--line-height-unit)); 是关键所在。它通过CSS的calc()函数，将单行高度乘以期望的行数（这里是3），从而精确地设定了容器的总高度。
- overflow: hidden; 确保任何超出此计算高度的内容都将被隐藏，从而实现截断效果。
- 最重要的一点是，我们没有使用text-overflow: ellipsis;，因此不会出现省略号。
优势与局限性
优势：
- 无省略号： 实现了文本截断而不在末尾显示省略号，提供了更简洁的视觉效果。
- 精确控制： 通过calc()函数可以精确控制显示多少行文本。
- 浏览器兼容性： 这种方法基于标准的CSS属性（line-height, height, overflow），具有很好的浏览器兼容性。
局限性：
- 依赖固定line-height： 这种方法要求line-height相对固定。如果文本的字体大小或line-height在不同设备或状态下发生变化，height的计算也需要相应调整，否则可能会导致行数不准确。
- 无截断提示： 由于没有省略号，用户可能无法直观地知道文本内容被截断了。在某些场景下，这可能影响用户体验。如果需要提示，可以考虑结合JavaScript添加“阅读更多”按钮，或者使用伪元素手动添加一个非省略号的截断指示。
- 不适用于所有字体： 尽管em单位通常能很好地工作，但不同的字体在相同的line-height下，其实际的文本高度可能会略有差异，这在极少数情况下可能导致轻微的视觉偏差。
总结
通过巧妙地利用CSS的line-height和height属性，结合calc()函数精确计算容器高度，并配合overflow: hidden，我们可以有效地实现多行文本的无省略号截断。这种方法避免了text-overflow: ellipsis带来的默认省略符，为开发者提供了更灵活的文本显示控制。在实际应用中，需要权衡其优势与局限性，特别是在用户体验和响应式设计方面进行适当考量。
