单行文本溢出通过white-space: nowrap、overflow: hidden和text-overflow: ellipsis实现，配合宽度限制；多行则用-webkit-line-clamp控制行数，结合-webkit-box-orient: vertical和overflow: hidden，推荐使用max-width或相对单位适配响应式布局。
在响应式布局中，文字溢出显示省略号需要根据容器宽度动态处理。核心是结合 CSS 的 text-overflow、white-space 和 overflow 属性，并确保容器有明确的尺寸限制。
单行文本溢出显示省略号
适用于标题、摘要等单行内容，在不同屏幕下自动截断并显示“...”。
关键样式：- white-space: nowrap; /* 禁止换行 */
- overflow: hidden; /* 超出隐藏 */
- text-overflow: ellipsis; /* 显示省略号 */
- width 或 max-width: 设置容器宽度（支持百分比、rem、vw 等响应式单位）
示例代码：
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%; /* 可替换为 max-width: 300px; 或 width: 50vw; */
}多行文本溢出显示省略号
用于卡片描述、新闻摘要等多行文本场景，适配移动端和桌面端。
立即学习“前端免费学习笔记（深入）”；
- display: -webkit-box;
- -webkit-line-clamp: 2; /* 控制显示行数 */
- -webkit-box-orient: vertical;
- overflow: hidden;
- word-break: break-all; /* 处理中文断句 */
示例代码：
.text-ellipsis-multi {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 100%;
height: auto;
}响应式设计建议
为了让省略号在不同设备上正常工作：
- 使用 max-width 或相对单位如 vw、%、rem 定义容器宽度，避免固定像素值
- 配合媒体查询微调行数或宽度：
@media (max-width: 768px) { .text-ellipsis-multi { -webkit-line-clamp: 1; } } - 确保父容器不超出视口，可结合 flex 或 grid 布局控制空间分配
基本上就这些。只要容器能正确限制宽度或高度，省略号就能在响应式环境下稳定显示。
