如何解决HTML段落设置缩进后文字溢出-html教程-PHP中文网

text-indent仅缩进首行，不控制换行或溢出；文字溢出主因是容器缺宽度约束或换行规则，尤其长英文/url场景；防溢出须四者齐备：display: block、width/max-width、overflow-wrap: break-word、必要时white-space/overflow/text-overflow组合。

如何解决html段落设置缩进后文字溢出

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 仅对首行生效，后续行不再缩进

示例（单行省略+首行缩进）：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

.indented-ellipsis {
  display: block;
  max-width: 300px;
  text-indent: 2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: break-word; /* 防长单词撑破 */
}