How to apply CSS styles to text only


Tags: html,css,innertext

Problem :

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?



Solution :

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>


    CSS Howto..

    CSS: How to float:right and center

    Wordpress Plugin - How can I make the text responsive, OR replace it with a new div?

    CSS How to get rid of border that appears around custom button on and after click

    HTML/CSS - How to position my image to the right so that it can be aligned with my text on the left?

    How to create a separated menu with logo in between

    how to display navigationMenu div left side of the slider

    How to select parents sibling with CSS? [duplicate]

    How Do I Reduce the Padding Around a Chart Within an Article

    How to close the menu after click third layer menu item

    How can I fit images in full height columns in Bootstrap?

    How to add CSS to a class through jQuery?

    How to hide div for specific height or width using CSS [duplicate]

    How to not change color of link on hover

    How to interchange table cells using Pure CSS

    How to have a color change animation on a button outline?

    How to layout list items in groups

    How do I correct this error?

    how to override left:0 using CSS or Jquery?

    How can I make this button image appear in Firefox 2.0 the same as it does in IE7?

    How to get a frame off animated png using CSS?

    How to remove spacing around in CSS? [duplicate]

    Meeting Calendar | How to take care of the overlapping meetings to show in the calendar?

    How to automatically put DIVs in columns (unknown number of DIVs)

    How to set the horizontal menu to be center without setting the specific width

    How to highlight table row on hover using CSS only?

    Javafx CSS How to inherit background color from other css settings

    How can I extend the width of a child div to go beyond the parent div's width?

    How does CORS (Access-Control-Allow-Origin header) increase security?

    How to target items

    How to apply last-child only for first nested li?