17370845950

小屏幕多行文本溢出需用 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 配合使用

示例：

小屏幕下限制行数并截断显示

仅靠换行不够？比如标题或摘要需固定显示 2 行，超出用省略号。需组合使用：

• display: -webkit-box + -webkit-line-clamp：实现多行省略（仅 WebKit 内核，但覆盖 iOS 和 Android 浏览器）
• overflow: hidden + text-overflow: ellipsis：必须配合 display: block 或 inline-block 和固定高度/行高

示例（2 行省略）：

用 media query 动态调整排版

小屏空间紧张，光靠换行和截断还不够，要主动“瘦身”：

• 减小 font-size 和 line-height，提升行容纳量
• 收紧 padding 或 margin，释放横向空间
• 对超长字段（如用户名、文件名）单独加 word-break: break-all

示例：

额外注意点

避免踩坑：

• white-space: nowrap 会禁用所有换行，检查是否误设
• 父容器没设 width 或 max-width，子元素无法参考边界换行
• Flex/Grid 容器中，文本容器需设 min-width: 0 或 overf

  

  low: hidden，防止伸缩项不收缩
• iOS Safari 对 -webkit-line-clamp 的兼容性较好，但需确保父元素无 height: 100% 类冲突样式