单行文本溢出需设置white-space:nowrap、overflow:hidden和text-overflow:ellipsis；多行则用-webkit-box和-webkit-line-clamp限制行数并加省略号；仅隐藏溢出内容可只设overflow:hidden。
当文本内容超出容器宽度时，可以通过CSS的 text-overflow 属性来控制如何显示溢出部分。常见做法是将超出的内容隐藏并用省略号（...）表示。要实现这一效果，需要结合几个关键属性一起使用。
1. 单行文本溢出隐藏加省略号
适用于只显示一行文本，超出部分以省略号结尾：
注意：必须配合 overflow: hidden 和 white-space: nowrap 才能生效。text-overflow: ellipsis; 表示超出部分用省略号代替。
.text-ellipsis {
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
width: 200px; /* 必须设定容器宽度 */
}
2. 多行文本溢出隐藏加省略号
CSS 原生的 text-overflow 不支持多行省略，但可以借助 -webkit-line-clamp 实现（兼容现代浏览器）：
.multi-line-ellipsis {
display: -webkit-box;
-webkit-line-clamp: 3; /* 限制显示3行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}
⚠️ 提示：-webkit-line-clamp 是 WebKit 特性，老旧IE不支持，但在移动端和主流桌面浏览器中广泛可用。3. 隐藏溢出不显示省略号
如果只想简单裁剪掉超出内容，不需要任何标记：
立即学习“前端免费学习笔记（深入）”；
.hide-overflow {
overflow: hidden;
width: 150px;
}
此时文本被截断，无省略号提示用户内容被隐藏。
基本上就这些常用方式，根据是否换行、是否需要提示来选择合适方案。
