CSS word-wrap样式设置：如何让换行文本第二行带空格缩进

嘿，我来帮你搞定这个换行后第二行缩进的需求！

首先得纠正你代码里的小问题：overflow: word-wrap是错误的写法哦——overflow和word-wrap（现在更推荐标准属性overflow-wrap）是两个独立的CSS属性。要让长文本自动换行，你应该用overflow-wrap: break-word。

接下来重点解决换行后第二行缩进的问题，这其实就是CSS里的「悬挂缩进」效果，有两种方法可以实现：

方法一：兼容性拉满的经典写法 #

这种方法适配所有现代浏览器，原理是用padding-left给所有行留左侧空间，再用负的text-indent把第一行拉回原位：

p {
  overflow-wrap: break-word; /* 确保长文本能正常换行 */
  padding-left: 2em; /* 所有行左侧预留2em空间 */
  text-indent: -2em; /* 第一行向左偏移2em，抵消padding */
}

方法二：更简洁的CSS新特性 #

如果你不需要兼容旧浏览器（比如Chrome 88+、Firefox 63+都支持），可以用CSS的hanging关键字实现悬挂缩进，代码更直观：

p {
  overflow-wrap: break-word;
  text-indent: hanging 2em; /* 直接指定悬挂缩进的宽度 */
}

把上面任意一段CSS替换你原来的代码，就能实现你想要的效果：第一行顶格显示，换行后的第二行及以后的内容都会带有2em的缩进空格~

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