本文将详细介绍如何在css中实现多行文本截断，同时避免显示传统的省略号（...）。通过巧妙结合`line-height`、精确计算`height`属性以及`overflow: hidden`，开发者可以实现对文本内容的高度控制，确保超出指定行数的文本被干净利落地裁剪，从而提供更简洁的用户界面体验。
理解传统文本截断方法及其局限性
在CSS中，我们通常使用text-overflow: ellipsis结合overflow: hidden和white-space: nowrap来实现单行文本的截断并显示省略号。对于多行文本，现代浏览器（尤其是基于WebKit内核的浏览器）提供了-webkit-line-clamp属性，它允许我们指定文本显示的行数，超出部分也会自动显示省略号。
以下是一个常见的多行文本截断示例：
.truncateTextWithDots {
display: -webkit-box;
-webkit-line-clamp: 3; /* 限制为3行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; /* 确保显示省略号 */
width: 200px;
border: 1px solid blue;
}<div class="truncateTextWithDots">
这是一个非常长的文本，它需要被截断到三行，并且在末尾显示省略号。这种方法在许多场景下都非常有用，但有时我们可能需要更简洁的界面，不希望看到省略号。
</div>然而，当需求明确指出“不显示省略号”时，上述方法便不再适用，因为text-overflow: ellipsis和-webkit-line-clamp的默认行为就是添加省略号。我们需要一种不同的策略来精确控制文本容器的高度，使得超出部分被完全隐藏。
实现无省略号多行文本截断
要实现无省略号的多行文本截断，核心思路是精确计算出指定行数文本所需的高度，然后将容器的高度设置为这个计算值，并结合overflow: hidden来隐藏超出部分。
立即学习“前端免费学习笔记（深入）”；
这种方法不依赖于text-overflow或-webkit-line-clamp，因此不会自动添加省略号。
核心CSS实现
我们将使用CSS自定义属性（CSS Variables）来定义单行文本的高度，这样可以方便地调整和计算。
.truncateText {
--single-line-height: 1.2em; /* 定义单行文本的高度，可根据字体大小调整 */
line-height: var(--single-line-height); /* 设置容器的行高 */
height: calc(3 * var(--single-line-height)); /* 计算3行文本的总高度 */
width: 200px; /* 设置容器宽度 */
border: 1px solid red; /* 示例边框 */
overflow: hidden; /* 隐藏超出容器高度的内容 */
/* 移除 text-overflow: ellipsis 和 -webkit-line-clamp */
}HTML结构
相应的HTML结构保持简洁：
<div class="truncateText"> 这是一个非常长的文本，它需要被截断到三行，并且在末尾不显示省略号。这种方法提供了更干净的视觉效果，适用于那些希望文本在固定空间内被精确裁剪的场景。 </div>
工作原理与优势
- --single-line-height: 定义了一个CSS变量，用于存储一行文本的理想高度。通常，line-height设置为1.2em到1.5em之间可以提供良好的可读性。
- line-height: var(--single-line-height): 将容器的行高设置为这个变量值。这确保了容器内的每一行文本都具有相同的高度。
- *`height: calc(3 var(--single-line-height))**: 这是关键步骤。我们通过calc()函数计算出三行文本所需的总高度。例如，如果--single-line-height是1.2em，那么容器的总高度将是3.6em`。
- overflow: hidden: 当文本内容的高度超过容器的height时，overflow: hidden会将其余部分裁剪掉，从而实现截断效果。
- 无省略号: 由于没有使用text-overflow: ellipsis或-webkit-line-clamp，因此不会有省略号出现。
这种方法的优势在于：
- 精确控制: 开发者可以精确控制文本显示的行数，并确保截断是干净的。
- 浏览器兼容性: 这种方法基于标准的CSS line-height、height和overflow属性，具有非常好的浏览器兼容性。
- 简洁性: 对于不需要省略号的场景，它提供了更简洁的用户界面。
注意事项
- 字体大小与line-height的一致性: 确保--single-line-height的值与实际字体大小和期望的行间距相匹配。如果字体大小发生变化，可能需要调整--single-line-height以保持视觉一致性。
- 响应式设计: 在响应式布局中，如果容器的宽度发生变化导致文本换行行为改变，这种基于固定行高的截断依然有效，但需要确保line-height在不同屏幕尺寸下依然合理。
- 文本内容动态性: 如果文本内容是动态加载的，并且其长度差异很大，此方法会始终截断到固定行数，可能会导致部分文本在截断处显得突兀。
- 避免半行显示: 由于我们是基于行高来计算总高度，文本通常会以整行的方式被截断。但在某些边缘情况下，如果字体实际渲染的高度与line-height有微小差异，或者文本行高不是整数倍，可能会出现部分字符被截断的情况。通常，只要line-height设置合理，这种情况并不常见。
总结
当需要对多行文本进行截断，并且明确要求不显示省略号时，通过精确设置容器的line-height和height（利用calc()计算），并结合overflow: hidden是一种强大且兼容性良好的解决方案。这种方法提供了对文本内容展示的精细控制，使得界面设计更加灵活和专业。
