CODEWITHSUNDEEP
htmlcssinnertext
Nate
Nate

Reputation: 373

How to apply CSS styles to text only

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?

Upvotes: 7

Views: 20243

Answers (3)

sadric adigbe
sadric adigbe

Reputation: 66

You can try to use

style='width: fit-content;'

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

Upvotes: 0

Josef Engelfrost
Josef Engelfrost

Reputation: 2965

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>

Upvotes: 6

Scott Forsythe
Scott Forsythe

Reputation: 370

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.

Upvotes: 3

Related Questions