本文详细介绍了如何在 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 带来的默认省略符，为开发者提供了更灵活的文本显示控制。在实际应用中，需要权衡其优势与局限性，特别是在用户体验和 响应式设计 方面进行适当考量。
