单行文本溢出隐藏需使用overflow: hidden、white-space: nowrap和text-overflow: ellipsis组合；多行则通过display: -webkit-box、-webkit-line-clamp和-webkit-box-orient实现两行或三行截断加省略号，适用于响应式布局中的新闻列表与卡片摘要场景。配合相对单位rem、em及百分比宽度、媒体查询可优化不同屏幕下的可读性与美观性，小屏幕下可调整-webkit-line-clamp值控制显示行数，避免半行文字问题。
在响应式网页设计中，文字内容需要适应不同屏幕尺寸，同时保持良好的可读性和布局美观。当容器宽度变化时，文字的显示行数和溢出处理显得尤为重要。通过结合 CSS 的 overflow、text-overflow 和其他相关属性，可以实现文字的自适应行数与溢出控制。
单行文字溢出隐藏与省略号显示
对于单行文本，最常见的是超出容器部分隐藏并用省略号表示。这需要以下三个属性配合使用：
- overflow: hidden：隐藏超出容器的内容。
- white-space: nowrap：强制文本不换行。
- text-overflow: ellipsis：当文本溢出时显示省略号。
示例代码：
.single-line {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px; /* 可根据响应式需求设为百分比或使用媒体查询 */
}多行文字溢出截断与省略号（基于 WebKit）
如果希望限制文字显示为两行或三行，并在超出时添加省略号，可以使用 WebKit 特有的 -webkit-line-clamp 属性。虽然不是所有浏览器都完全支持，但在主流移动端和现代桌面浏览器中表现良好。
立即学习“前端免费学习笔记（深入）”；
关键属性包括：
- display: -webkit-box：将容器设为弹性盒子模型（WebKit 内核专用）。
- -webkit-line-clamp：限制显示的行数。
- -webkit-box-orient: vertical：设置子元素垂直排列。
- overflow: hidden：确保多余内容被裁剪。
示例：限制为两行显示
.multi-line {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
width: 100%;
}该方法非常适合新闻列表、卡片摘要等场景，在响应式布局中能自动适应父容器宽度变化。
响应式中的字体与容器适配建议
为了增强文字在不同设备上的可读性，建议结合以下做法：
- 使用相对单位如 rem 或 em 设置字体大小，便于跟随根字体调整。
- 容器宽度使用百分比或 flex/grid 布局，使文本区域随屏幕变化。
- 配合媒体查询微调 line-height 或 max-height，避免多行截断出现半行文字。
例如，在小屏幕上减少最大行数：
@media (max-width: 768px) {
.multi-line {
-webkit-line-clamp: 1;
}
}基本上就这些。利用 overflow hidden 与 text-overflow 配合现代 CSS 技术，可以在响应式环境中有效控制文字的显示行数与溢出样式，提升用户体验。
