How to apply CSS styles to text only - html

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?

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">Samuel L. Ipsum</span></p>

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.

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