正确做法是用<p>标签语义化分段并配CSS样式，而非依赖<br>或换行符；因HTML会合并空白符，<br>无语义且破坏响应式与无障碍，而<p>自带间距、语义和SEO价值。
直接用 <p> 标签分段，再配 margin、line-height 和 text-indent，就能解决 80% 的长文本可读性问题；其余 20% 要靠 white-space: pre-wrap 处理带回车的原始文本，以及 overflow-wrap: break-word 应对无空格长串。
为什么不能只靠换行符或多个 <br> 分段
HTML 解析时会把源码里的回车、空格合并成单个空格，<br> 只是强制换行，不构成语义段落——它没有上下边距、不被屏幕阅读器识别为内容单元、SEO 权重极低。更糟的是，连续用 <br> 容易导致响应式断点错乱，小屏下段间距失控。
- 正确做法：按语义切分逻辑块，每个块用一对
<p>包裹 - 错误写法：
<p>第一段</p><br><br><p>第二段</p>—— 多余<br>破坏默认margin节奏 - 别在
<p>里嵌<div>或另一个<p>，HTML5 不允许嵌套段落
white-space: pre-wrap 什么时候必须用
用户从 <textarea> 提交的带换行的评论、日志、Markdown 渲染后的内容，如果直接塞进 <p>，浏览器会把 \n 当空格处理，整段“塌”成一行。此时 white-space: normal 会丢掉原始换行，white-space: pre 又不折行导致横向溢出。
- 唯一解：
white-space: pre-wrap—— 保留所有\n、\t和空格，同时允许在容器右边界自动折行 - 适用场景：
<div class="comment-body">这类非语义化容器，而非<p>（<p>默认就是normal，强行加pre-wrap可能破坏首行缩进） - 注意：
text-overflow: ellipsis和pre-wrap冲突，省略号不会出现
Flex 布局里文字不换行？先查 min-width: 0
明明写了 overflow-wrap: break-word，文字还是溢出撑破容器，90% 是因为父容器用了 display: flex，而文本所在子元素没设 min-width: 0。Flex 子项默认 min-width: auto，会阻止内容收缩，换行逻辑被绕过。
立即学习“前端免费学习笔记（深入）”；
- 修复方式：给文本容器（比如
<div class="content">）加min-width: 0，不是加在父级<section>上 - 即使子元素用了
flex: 1，min-width: 0仍不可省略 - 别用
overflow: hidden强行掩盖——它只是藏起溢出，不解决换行失效的根本问题
text-overflow: ellipsis 不生效的三个硬条件
只写 text-overflow: ellipsis 没用，它依赖三者同时成立，缺一不可：
- 容器必须有明确宽度限制：
width或max-width（百分比、rem、px 都行，但不能是auto或未声明） - 必须配
white-space: nowrap—— 强制不换行，否则文本自动折行，省略号没机会触发 - 必须配
overflow: hidden—— 隐藏超出部分，省略号才能被“挤”出来 - 额外前提：元素需是
block或inline-block；默认span是内联元素，得加display: inline-block
复杂点在于：Flex 布局中，哪怕你写了 max-width: 200px，子项仍可能无视它撑开——这时候 min-width: 0 是那个“一加就灵”的开关，而不是靠调 flex-shrink 或 flex-basis。
