CSS - 如何为包装文本添加填充？答案

【问题标题】：CSS - How to add padding to wrapped text?CSS - 如何为包装文本添加填充？
【发布时间】：2022-01-24 22:33:59
【问题描述】：

如何使用 CSS 在文本的换行部分的左侧添加填充？

如果我知道换行符的位置，下面是一个示例：

.wrapper {
  border: 2px solid darkblue;
  padding: 5px;
}

.wrapped {
  padding-left: 10px;
}

<div class="wrapper">
  Hello, this is a<br>
  <span class="wrapped">question on</span><br>
  <span class="wrapped">stackoverflow.</span>
</div>

不知道换行会在哪里出现，如何达到同样的效果？

【问题讨论】：

标签： css word-wrap

【解决方案1】：

你有 css 属性 text-indent 给你第一行的缩进

https://www.w3schools.com/cssref/pr_text_text-indent.asp

您可以将此属性与容器上的填充混合，以在行上而不是第一个行上进行填充

.wrapper {
  border: 2px solid darkblue;
  padding: 5px;
  padding-left: 15px;
  text-indent: -10px;
}

<div class="wrapper">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

【讨论】：