如何通过HTML/CSS实现窄列内折行文本的缩进排版（不使用项目符号）

要解决折行后无缩进的可读性问题，我推荐一个简单且不占用额外空间的CSS技巧——利用负文本缩进+左内边距的组合，完美实现第一行顶格、折行部分自动缩进的效果，完全不需要项目符号。

核心思路 #

给文本容器设置一个左内边距，让所有行都有左侧空白；然后给第一行设置负的文本缩进，抵消掉这个内边距，让第一行顶格显示。这样折行的后续行就会自然缩进，既满足视觉需求，又不会额外占用空间。

代码示例 #

首先是HTML结构，把你的两个字符串放在容器里：

<div class="wrapped-text">foo bar baz</div>
<div class="wrapped-text">abc def ghi</div>

然后是CSS样式，模拟空间有限的列并实现缩进效果：

.wrapped-text {
  /* 模拟宽度收缩的列，可根据实际需求调整数值 */
  max-width: 70px;
  /* 设置折行后的缩进量，用em单位可适配字体大小 */
  padding-left: 1.2em;
  /* 负缩进抵消内边距，让第一行顶格 */
  text-indent: -1.2em;
  /* 确保文本超出宽度时自动折行 */
  word-wrap: break-word;
  /* 可选：添加间距让容器更清晰 */
  margin: 8px 0;
}

效果说明 #

• max-width：控制列的最大宽度，模拟你提到的“宽度尽可能收缩”的场景；
• padding-left：给所有行添加左侧空白，这就是折行后的缩进量；
• text-indent: -1.2em：把第一行的文本向左拉，刚好抵消掉左内边距，实现第一行顶格；
• 整个方案不需要任何额外元素或项目符号，完全靠CSS布局实现，不会占用多余空间。

你可以根据实际需求调整padding-left和text-indent的数值，比如改成20px或者1.5em，只要两个值保持一致就行。

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