小屏幕多行文本溢出需用 overflow-wrap: break-word 控制换行，配合 -webkit-line-clamp 实现2行省略，并通过 media query 动态调整字体、行高及断词策略。
小屏幕下多行文本溢出，核心是控制换行和响应式截断。用 word-break 解决长单词/无空格文本撑破容器，再配合 @media 调整字体、行高或加省略，效果更稳。
用 word-break 处理强制换行
默认情况下，英文、数字串或中英文混排中的超长 Token（如 URL、邮箱、一长串不带空格的字符）不会自动换行，直接溢出容器。这时需显式设置换行策略：
- word-break: break-word：旧写法（已废弃但仍广泛支持），在必要时断开长单词换行
- word-break: break-all：粗暴但有效，任何位置都可断，适合纯数据展示（如日志、token），但可能割裂语义
- overflow-wrap: break-word（推荐）：现代标准写法，只在无法正常换行时才断词，更友好；常与
word-break: normal配合使用
示例：
.text-box {
overflow-wrap: break-word;
word-break: normal;
max-width: 100%;
}
小屏幕下限制行数并截断显示
仅靠换行不够？比如标题或摘要需固定显示 2 行，超出用省略号。需组合使用：
立即学习“前端免费学习笔记（深入）”；
- display: -webkit-box + -webkit-line-clamp：实现多行省略（仅 WebKit 内核，但覆盖 ios 和 android 浏览器）
- overflow: hidden + text-overflow: ellipsis：必须配合
display: block或inline-block和固定高度/行高
示例（2 行省略）：
.summary {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
用 media query 动态调整排版
小屏空间紧张，光靠换行和截断还不够，要主动“瘦身”：
示例：
@media (max-width: 480px) {
.content { font-size: 14px; line-height: 1.4; }
.filename { word-break: break-all; }
}
额外注意点
避免踩坑：