6

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

What I want to get

What I get is basically:

What I actually get

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?

j08691
  • 204,283
  • 31
  • 260
  • 272
Nate
  • 353
  • 1
  • 3
  • 15
  • 3
    Always check CSS-Tricks :) https://css-tricks.com/multi-line-padded-text/ – Josef Engelfrost Nov 10 '15 at 18:29
  • 1
    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! – Nate Nov 10 '15 at 18:48

3 Answers3

5

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>
Josef Engelfrost
  • 2,955
  • 1
  • 29
  • 38
  • Thanks. That works perfectly, and even accounts for any line spacing with my semi-transparent background colour. Thank you. – Nate Nov 10 '15 at 22:39
3

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.

Community
  • 1
  • 1
Scott Forsythe
  • 360
  • 6
  • 18
  • 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 ... – Nate Nov 10 '15 at 22:40
0

You can try to use

style='width: fit-content;'

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

sadric adigbe
  • 56
  • 3