CSS - How to add padding to wrapped text?

Question

How can I add padding to the left-hand side of the wrapped portion of text using CSS?

Here is an example of what it might look like if I knew where the line breaks would be:

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

How can I achieve the same effect when I don't know where the line breaks will occur?

Answer 1

you have the css property text-indent that give you the indent of the first line

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

you can mix this property with a padding on your container to have padding on lines but not the first one

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