text-indent仅缩进首行，不控制换行或溢出；文字溢出主因是容器缺宽度约束或换行规则，尤其长英文/URL场景；防溢出须四者齐备：display: block、width/max-width、overflow-wrap: break-word、必要时white-space/overflow/text-overflow组合。
text-indent 只缩进首行，不控制换行或溢出——它和 overflow、white-space 完全无关。文字溢出是布局失控的结果，不是缩进惹的祸。
为什么加了 text-indent 后文字会溢出？
常见错误是：只设 text-indent: 2em，却没给容器设宽度约束或换行规则。尤其当内容含长英文单词、URL 或无空格字符串时，浏览器无法自动断行，首行缩进后剩余空间更小，直接撑破容器边界。
另一个高发场景是父容器用了 display: flex 或 display: inline-block，但没配 min-width: 0 或 overflow: hidden，导致子元素（比如 p）拒绝收缩，缩进反而加剧溢出。
要点：
立即学习“前端免费学习笔记（深入）”；
-
text-indent不影响文本是否换行，也不触发截断逻辑 - 溢出本质是「容器没管住内容」，跟缩进值大小无关
- 中英文混排时，
word-break: break-all或overflow-wrap: break-word才是关键
p 元素加 text-indent 后如何防溢出？
必须组合使用以下四条规则，缺一不可：
- 给
p显式设display: block（避免被父级 flex/inline 上下文干扰） - 设
width或max-width（没有宽度约束，text-overflow就是摆设） - 用
overflow-wrap: break-word处理长单词（比word-break: break-all更安全） - 若需省略号，还得补上
white-space: nowrap+overflow: hidden+text-overflow: ellipsis——但注意：这会禁用所有换行，text-indent仅对首行生效，后续行不再缩进
示例（单行省略+首行缩进）：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.indented-ellipsis {
display: block;
max-width: 300px;
text-indent: 2em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word; /* 防长单词撑破 */
}多行段落既要缩进又要截断，怎么办？
原生 CSS 没有「多行 + 首行缩进 + 末行省略号」的组合方案。-webkit-line-clamp 会忽略 text-indent，因为它是基于 display: -webkit-box 的盒模型，首行缩进逻辑不适用。
可行路径只有两个：
- 放弃首行缩进，用
-webkit-line-clamp: 3配合padding-left模拟整体左偏移（最简） - 用 JavaScript 检测
scrollHeight > clientHeight，手动截断字符串并拼接…，再用span包裹首字实现缩进（可控但重）
注意：padding-left 是替代 text-indent 最稳妥的方式，它不影响换行行为，且与 line-clamp 兼容。
移动端缩进后文字溢出的特殊处理
小屏下 text-indent: 2em 可能占掉近 1/3 可视宽度，留给内容的空间极小。此时 overflow-wrap: break-word 往往失效，因为断点仍不够密。
建议在媒体查询中降级：
- 屏幕宽 text-indent: 1em +
font-size: 14px - 或直接移除
text-indent，改用padding-left: 16px保证留白一致性 - 对按钮、标签类短文本，优先用
word-break: break-word而非省略号——小屏点“…”容易误触
真正难搞的不是缩进本身，而是缩进和换行、截断、响应式三者之间的耦合关系。只要记住：缩进是视觉修饰，溢出是布局问题，别让前者掩盖后者。
