小屏幕多行文本溢出需用 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 行省略）：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
用 media query 动态调整排版
小屏空间紧张，光靠换行和截断还不够，要主动“瘦身”：
- 减小
font-size和line-height，提升行容纳量 - 收紧
padding或margin，释放横向空间 - 对超长字段（如用户名、文件名）单独加
word-break: break-all
示例：
@media (max-width: 480px) {.content { font-size: 14px; line-height: 1.4; }
.filename { word-break: break-all; }
}
额外注意点
避免踩坑：
-
white-space: nowrap会禁用所有换行，检查是否误设 - 父容器没设
width或max-width，子元素无法参考边界换行 - Flex/Grid 容器中，文本容器需设
min-width: 0或overflow: hidden，防止伸缩项不收缩 - iOS Safari 对
-webkit-line-clamp的兼容性较好，但需确保父元素无height: 100%类冲突样式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
