如何实现段落悬挂缩进并解决负text-indent与float元素的冲突？

现代浏览器最优方案 #

直接使用CSS规范原生支持的悬挂缩进写法，无需依赖负text-indent的hack方案，从根源避免文字溢出覆盖浮动元素的问题：

.hanging-indent {
  text-indent: hanging 20px; /* 第一行不缩进，其余所有行缩进20px */
}

该写法目前已被Chrome、Firefox、Edge等主流现代浏览器支持，完全符合悬挂缩进的设计预期，且不会与浮动元素产生冲突。

旧浏览器兼容方案 #

如果需要兼容不支持hanging值的旧浏览器，可以通过调整内边距与文本缩进的组合，同时添加overflow-x: clip限制文字溢出范围，确保第一行不会跑到浮动元素上方：

.hanging-indent {
  padding-left: 20px;
  text-indent: -20px;
  overflow-x: clip; /* 裁剪超出左侧边界的文字，避免覆盖浮动元素 */
}

注意：overflow-x: clip不会生成滚动条，仅裁剪超出元素内容框的部分，既保留悬挂缩进效果，又解决了浮动元素覆盖问题。

测试代码示例（现代方案） #

<div class="soup-image"></div>

<p class="hanging-indent">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget lorem nunc. Nulla facilisi. Nam feugiat velit vel turpis malesuada, in sodales risus tristique. Vestibulum sagittis vehicula nunc, non hendrerit odio ultrices et. Fusce consectetur eget turpis eu lobortis.
</p>

.hanging-indent {
  text-indent: hanging 20px;
  width: 700px;
}

:root {
  --page-width: 700px;
  --page-height: 100px;
  --top-margin: 10px;
  --left-margin: 10px;
  --bottom-margin: 10px;
  --right-margin: 10px;
}
.soup-image {
  display: block;
  width: 700px;
  height: calc(var(--page-height) + 20px);
  position: relative;
  float: left;
  shape-outside: polygon(0 0, 100% 0, 100% var(--top-margin), 0 var(--top-margin), 0 calc(100% - 1 * var(--bottom-margin) - 20px), 100% calc(100% - 1 * var(--bottom-margin) - 20px), 100% 100%, 0% 100%);
  background: linear-gradient(white var(--top-margin), transparent var(--top-margin), transparent calc(100% - 1 * var(--bottom-margin) - 20px), white calc(100% - 1 * var(--bottom-margin) - 20px));
  pointer-events: none;
}

内容的提问来源于stack exchange，提问作者Desperado