How to apply CSS styles to text only

Question

I am trying to apply a style to a like of HTML text. What I want is basically:

What I get is basically:

As you can see, the first line is indented, but not any other line. So far, I have the text inside of a <span>, which is nested inside of a <div>.

.slide-text .text {
  background-color: rgba(0, 0, 0, .6);
  color: #FFF;
  padding: 8px 17px;
}
.slide-text .slide-title {
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-weight: 700;
}
.slide-text .slide-content {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 500;
}

My HTML code is:
<div class="slide-text">
  <div class="slide-title"><span class="text">[TITLE]</span>
  </div>
  <div class="slide-content"><span class="text">[TEXT]</span>
  </div>
</div>

They work great, as long as neither the title or the content are more than one line. As soon as they go over two or more lines, the span loses its inner padding. Changing the inner span to display: inline-block; gives it a block display as soon as it goes into two lines. Is there a way to get the effect I am looking for?

Hepcat

Always check CSS-Tricks :) css-tricks.com/multi-line-padded-text – Aluminum

Could you repost that as an actual answer? Just so I can credit you with the solution. It never crossed my mind to add the word "multiple" to my search, otherwise I might have found it myself. The examples work on my phone, so I am full of hope. Thank you! – Hepcat

Answer 1

The CSS guru Chris Coyier has an article on CSS-Tricks listing several methods to solve this. One method is the one with box-shadow. It is already mentioned as an answer, but it needs some more love to work in modern Firefox :).

.multi-line-padded {
  background: black;
  color: white;
  
  /* For the top and bottom padding */
  padding: 0.5em 0; 
  
  /* Text height (1.0) + compensate for padding (0.5 * 2) */
  line-height: 2;
  
  /* For the left and right padding */
  /* Vendor prefixes FIRST */
  -webkit-box-shadow: 1em 0 0 black, -1em 0 0 black;
  -moz-box-shadow: 1em 0 0 black, -1em 0 0 black;
  box-shadow: 1em 0 0 black, -1em 0 0 black;
  
  /* Firefox defaults to `box-decoration-break: split`, we need `clone` */
  box-decoration-break: clone; 
}

<p><span class="multi-line-padded">You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder.</span></p>

<p style="text-align: right;"><span class="multi-line-padded"><a href="http://slipsum.com/" style="color: white;">Samuel L. Ipsum</a></span></p>

Aluminum

Thanks. That works perfectly, and even accounts for any line spacing with my semi-transparent background colour. Thank you. – Hepcat

Answer 2

Try following the example in the best answer to this similar question. It essentially suggests using a box-shadow to create padding.

span {
  background:#ff0;color:#000;
  box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
  -moz-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
  -webkit-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
}

will indent all of your text equally and add yellow padding (change the #ff0 to any HTML color value you need). However, you will have to reformat the existing code, since it will indent further than the shadow.

Grimm

Thank you. It works really well, although I awarded the correct answer to Josef just because it takes into account line spacing, but basically box-shadow saves the day. Shame I can't give two correct answers ... – Hepcat

Answer 3

You can try to use

style='width: fit-content;'

For more info: https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content

Leola

You could give more detail about your answer to tell how to use it. – Deadline

I do add a link to the Developer Mozilla website for better understanding. – Leola