white-space、writing-mode 和 text-overflow 三属性组合可解决90%文字排版问题：pre-wrap保留用户换行并自动折行；vertical-rl配text-orientation实现可控竖排；ellipsis截断需同时满足width、nowrap和hidden三条件。
直接用 white-space、writing-mode 和 text-overflow 这三个 CSS 属性，就能解决 90% 的 HTML 文字排版难题。别堆砌标签，关键在属性组合与边界条件控制。
white-space: pre-wrap 是处理用户输入换行的唯一可靠方案
表单提交的文本带 \n，直接塞进 <p></p> 或 <div> 会塌成一行——浏览器默认把换行符当空格处理。
<ul>
<li>
<code>white-space: normal：能折行但丢掉所有原始换行，不适合评论、日志等需保留段落结构的场景
white-space: pre：保留 \n 和空格，但长行不折，容易横向溢出容器white-space: pre-wrap：唯一兼顾两者——原样保留换行符 + 在右边界自动折行pre-wrap 和 text-overflow: ellipsis 互斥，加了省略号就失效writing-mode: vertical-rl 实现中文竖排时必须配 text-orientation
只设 writing-mode: vertical-rl 不够，英文和数字默认横排，看起来像“散装字母”。
-
text-orientation: mixed（默认）：拉丁字符水平显示，适合古籍中夹带英文术语 -
text-orientation: upright：强制所有字符直立，但小写字母如a、e可读性下降，慎用 - 竖排下
line-height实际控制的是“列高”，建议设为1.8以上避免字符重叠 - 移动端需额外测试：iOS Safari 对
writing-mode的渲染有细微偏移，建议加transform: translateZ(0)触发硬件加速
text-overflow: ellipsis 单行截断必须同时满足三个硬性条件
漏掉任意一个，省略号就完全不出现，且无任何报错提示。
- 父容器必须有明确的
width或max-width（百分比可，auto不行） - 必须设置
white-space: nowrap，否则文字先折行，根本不会溢出 - 必须设置
overflow: hidden，visible或scroll都会让省略号失效 - 常见坑：
display: flex容器里子元素未设flex-shrink: 0，会导致宽度计算异常，省略号消失
table td 内容不换行？先检查 white-space: nowrap 是否被框架悄悄加上
Bootstrap 4+、Ant Design 等 UI 库常给 td 默认加 white-space: nowrap，导致长 URL 或连续英文单词撑破表格。
- 修复只需一行：
td { white-space: normal; overflow-wrap: break-word; } -
overflow-wrap: break-word是标准写法，word-wrap: break-word是旧别名，兼容 IE9+ 但建议用新名 - 必须配合固定宽度（如
width: 200px或max-width: 200px），否则浏览器无法判断在哪折 - 避免
word-break: break-all：它会在任意字符间切断，中文可能断在字中间，比如“排版”变成“排
版”
真正难的不是记住这些属性名，而是每次写样式前先问一句：这段文字的换行意图是什么？是用户主动敲的回车，还是容器宽度逼它折行，还是我刻意禁止换行来触发省略？意图错了，属性再对也白搭。
