在CSS初级项目中，文字溢出是最常见的布局问题之一。一个固定宽度的卡片标题、表格单元格或导航项，文字长度一旦超过容器宽度，默认情况下会换行，容器高度随之增加，或者溢出内容覆盖相邻元素。为了保持单行整洁，通常会使用省略号截断。但很多初学者只写 text-overflow:ellipsis，却发现没有任何效果。这是因为该属性不能单独工作，它必须配合其他条件一起使用，并且省略号的垂直位置还受到 line-height 的影响。
一、单行省略号的生效条件
要让单行文字在溢出时显示省略号，至少需要满足三个条件。第一，元素必须是块级容器或行内块容器，因为 text-overflow 只对块级容器中的行内内容起作用。第二，必须使用 white-space:nowrap 禁止文字换行。浏览器默认的 white-space 值为 normal，文字超出宽度时会自动换到下一行，这样就不会触发溢出裁剪。第三，必须设置 overflow:hidden，将超出容器边界的内容隐藏起来。只有这三个条件同时成立，text-overflow:ellipsis 才会把被裁剪的位置替换成省略号。
另外，容器本身还需要有一个确定的宽度或最大宽度。如果容器宽度由内容撑开，文字永远不会溢出，省略号自然也不会出现。在初级项目中，常见做法是为标题、单元格或按钮设置固定宽度，比如 width:200px，或者使用 max-width:100% 配合父级宽度。下面是一个基础的可复用样式：
.ellipsis {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
在 Flex 或 Grid 布局中，子项默认的最小宽度可能由内容决定，导致即使设置了 overflow:hidden 也无法收缩。这时还需要给子项加上 min-width:0，才能让省略号正常生效。这个细节在卡片列表和表格布局里尤其常见。
二、line-height如何影响省略号显示
line-height 控制行内框的高度，它决定了单行文字在容器中的垂直位置。当容器没有固定高度时，高度由 line-height 撑起。如果省略号所在的元素设置了过小的 line-height，文字上下部分可能被 overflow:hidden 裁掉；如果行高过大，文字会显得偏上或偏下，并且容器高度也会变大。因此，在实现省略号时不能只关心水平方向的截断，还要根据设计稿调整行高。
例如一个高度为 40px 的按钮，如果希望文字垂直居中，可以设置 line-height:40px。此时再配合单行省略号样式，文字会在按钮中间显示，超长部分从右侧被截断并出现省略号。代码示例如下：
.btn {
display: inline-block;
width: 120px;
height: 40px;
line-height: 40px;
padding: 0 12px;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
需要特别注意的是，如果容器高度固定，而 line-height 与高度不一致，文字就不会垂直居中。例如容器 height:36px 但行高仍为 40px，文字会向下溢出并被隐藏。此时应优先让高度和行高保持一致，或者改用 Flex 布局的 align-items:center 来单独控制垂直居中，但单行省略号的基础条件仍然不能省略。
三、多行文字溢出与行高的配合
初级项目中有时也需要处理两行或三行标题的截断。单行方案无法满足这种需求，可以使用 -webkit-line-clamp 实现多行省略。它需要配合 display:-webkit-box、-webkit-box-orient:vertical 和 overflow:hidden 一起使用。通过 -webkit-line-clamp 指定显示的行数，超出部分会用省略号结束。
.clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height: 1.5;
}
多行截断时，行高同样不能忽视。如果 line-height 设置得过大，容器可能显示不满指定行数，或者最后一行只露出一小部分文字，导致省略号位置奇怪。通常建议先确定 line-height，再通过 max-height 或固定高度来限制容器高度，使其大约等于 line-height 乘以行数。例如行高为 24px、需要显示两行时，容器高度可以设置为 48px 左右。这样可以保证两行文字完整显示，第三行开始被裁剪。
不过 -webkit-line-clamp 的兼容性主要依赖 WebKit 内核浏览器，在部分旧版 Firefox 中支持有限。对于初级项目，如果只需要覆盖现代浏览器，可以直接使用；如果需要更稳妥的方案，单行省略仍然是首选。
四、常见场景中的组合写法与避坑
在卡片标题、表格单元格和导航菜单中，文字溢出往往伴随着复杂的容器嵌套。一个典型的卡片标题容器可能同时具备 Flex 布局、内边距和固定宽度。此时建议把省略号样式单独抽成一个工具类，例如 .text-ellipsis，在需要的元素上直接添加，减少重复代码，也便于统一调整行高。
.text-ellipsis {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
表格单元格中实现省略号时，除了设置 table-layout:fixed 之外，单元格本身也需要设置 max-width 或宽度，否则表格宽度分配可能不稳定。另一个常见误区是给伪元素或图标设置省略号，期望它们与文字一起截断。实际上 text-overflow 只作用于文本内容，图标或内联块元素不会自动被替换成省略号，需要单独控制布局。
最后，省略号方案只适用于单行文本的可视化截断，内容本身并没有被删除。如果需要在复制、搜索或无障碍阅读时保留完整文本，建议使用 title 属性或自定义气泡提示，让用户悬停时能看到完整内容。这样既保证了布局稳定，也兼顾了信息可获取性。
CSS文字溢出text-overflow ellipsisline-height修改时间：2026-08-27 21:15:48