在网页排版中，文本内容的长度往往不可控。当一段文字放入固定宽高的容器中时，超出的部分如果不加处理，就会破坏整体布局。CSS通过几个基础属性的组合，能够精准地把超出范围的文本隐藏起来，甚至以省略号暗示用户内容未尽。下面先了解最核心的单行隐藏方案。
一、单行文本超出隐藏
单行文本隐藏是最常见也最简单的需求，例如列表项的标题、导航菜单文字等。它的实现依赖三个属性共同作用：white-space: nowrap让文本不换行，overflow: hidden裁切溢出区域，text-overflow: ellipsis在裁切处显示省略号。缺少任何一个，效果都会失效。
需要注意的是，text-overflow: ellipsis只有在元素具备块级或行内块特性、且有明确宽度限制时才生效。如果父容器宽度被内容撑开，文本永远不会溢出。以下代码演示了一个固定宽度标题的截断：
/* 单行文本超出隐藏 */
.truncate-single {
width: 200px; /* 必须有限制宽度 */
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出 */
text-overflow: ellipsis; /* 末尾显示省略号 */
}
这种方案的优点是兼容性极好，从IE6开始就支持。缺点也很明显：只能处理一行，对多行文本无能为力。如果设计稿要求显示两行或三行后截断，就需要用到下面介绍的方法。
二、多行文本超出隐藏
多行截断在移动端卡片描述、商品简介里大量存在。传统标准CSS长期缺乏原生的多行省略能力，因此WebKit内核浏览器率先提供了-webkit-line-clamp私有属性。它通过弹性盒子模型配合display: -webkit-box来限制显示行数。
使用该方法时，必须设置-webkit-box-orient: vertical指明盒子的排列方向，否则部分浏览器会忽略行数限制。同时overflow: hidden依然不可少。示例代码如下：
/* 多行文本超出隐藏，最多显示3行 */
.truncate-multi {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 限制行数 */
overflow: hidden;
width: 100%;
}
该方案在Chrome、Safari、Edge等基于Chromium或WebKit的浏览器中表现稳定，但在Firefox旧版本中不支持。如果项目需要兼容老旧Firefox，可以考虑用JavaScript计算字符高度截断，或者接受非省略号形式的隐藏。另一种纯CSS思路是设定max-height加overflow: hidden，虽无省略号，但能硬性收住区域。
多行截断的替代写法
不依赖私有属性时，可以用固定高度加line-height推算行数，再用overflow: hidden裁掉多余内容。例如三行文字，行高20px，则容器高60px。这种方法简单但无法自动加省略号，适合对视觉提示要求不高的场景。
/* 无省略号的多行隐藏 */
.hide-lines {
line-height: 20px;
max-height: 60px; /* 3行高度 */
overflow: hidden;
}
相比-webkit-line-clamp，这种写法跨浏览器一致性更好，但末尾显得突兀。实际开发中，往往根据目标用户浏览器占比来选择。
三、结合HTML结构的隐藏技巧
有时设计师希望在文本超出时不仅隐藏，还能通过标题属性保留全文。这时可以在标签上写title属性，鼠标悬停即可看全貌。CSS只负责视觉截断，HTML负责语义补全。
此外，若文本来自用户输入，需注意转义<、>等字符，避免破坏页面结构。下面是一个带title的单行截断标签示例：
<div class="truncate-single" title="这是一段非常长的文本内容示例"> 这是一段非常长的文本内容示例 </div>
在响应式布局里，容器宽度可能随屏幕变化，此时单行截断依然有效，因为宽度是相对的。而多行截断因行数固定，通常不会因宽度微调出现显示异常。掌握这几类隐藏方式，就能覆盖绝大多数排版收敛需求。
四、常见问题与排查
初学者常遇到省略号不显示的情况。排查顺序一般为：容器是否有明确宽度、是否设置了nowrap、overflow是否为hidden。若三项无误仍无效，检查元素是否被设置为display: inline且无宽度，此时应改为inline-block或block。
另一个坑是Flex子项中的文本截断。Flex item默认min-width: auto，可能导致宽度不被约束，省略号失效。解决办法是给该子项加min-width: 0，允许收缩。示例如下：
.flex-item {
flex: 1;
min-width: 0; /* 关键：允许缩小到小于内容宽度 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
理解这些边界条件，能帮助我们在复杂布局中稳妥地隐藏文本超出部分，而不是盲目复制代码片段。