要实现文字溢出显示省略号，需根据单行或多行场景设置相应CSS。单行溢出需满足三个条件：white-space: nowrap、overflow: hidden、text-overflow: ellipsis，且容器有固定宽度；多行溢出则通过display: -webkit-box、-webkit-line-clamp限制行数、-webkit-box-orient: vertical实现，并结合line-height计算容器高度（如2行×1.4行高=2.8em），推荐使用em单位和无单位行高值以提升响应性与可维护性，避免文字遮挡或布局松散，从而在固定尺寸容器中优雅处理不确定文本长度的显示问题。
在CSS初级项目中，处理文字溢出是一个常见需求，尤其是当文本内容长度不确定但容器尺寸固定时。使用 text-overflow: ellipsis 配合合适的行高设置，可以优雅地实现单行或多行文字溢出显示省略号的效果。
单行文字溢出加省略号
这是最基础也最常用的场景，比如列表标题、按钮文字等。要实现单行文本溢出显示“...”，需满足三个关键样式条件：
- white-space: nowrap：禁止文本换行
- overflow: hidden：超出部分隐藏
- text-overflow: ellipsis：溢出时显示省略号
示例代码：
.title {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5; /* 可根据设计调整 */
}
多行文字溢出加省略号（结合行高）
多行省略在卡片描述、新闻摘要中很实用。虽然 text-overflow: ellipsis 原生只支持单行，但可通过 -webkit-line-clamp 实现多行截断。
立即学习“前端免费学习笔记（深入）”；
关键点是合理设置 line-height 和容器高度，确保省略号正确显示在最后一行下方。
- display: -webkit-box：启用弹性盒子模型（WebKit私有）
- -webkit-line-clamp：限制行数
- -webkit-box-orient: vertical：垂直排列子元素
- line-height：控制每行高度，影响整体截断计算
示例：限制两行文本，行高为1.4
.description {
width: 200px;
height: 2.8em; /* 2行 × 1.4行高 */
line-height: 1.4;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
提示：height 设置为 em 单位可与 line-height 联动，增强响应性。行高对视觉效果的影响与调试建议
line-height 不仅影响文字垂直居中和可读性，还直接决定多行截断容器的高度是否精准。
- 行高太小会导致文字拥挤，省略号可能遮挡底部字符
- 行高太大则容器空隙过多，影响布局紧凑性
- 推荐使用无单位数值（如 1.4、1.5），避免字号变化带来的错乱
调试技巧：先设定 font-size 和 line-height，再根据行数计算精确高度，或使用 max-height 配合 padding 微调视觉空间。
基本上就这些。掌握 text-overflow 与 line-height 的配合逻辑，能在大多数初级项目中高效处理文字溢出问题，既保证美观又提升用户体验。
