CSS

Question

如何使用 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">Whosebug.</span>
</div>

不知道哪里会换行，如何实现同样的效果？

Answer 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>

CSS - 如何为换行文本添加填充？

CSS - How to add padding to wrapped text?

word-wrap