Span Background-Color & Padding Problems

span background-color & padding problems

I've tackled something similar before: Add padding at the beginning and end of each line of text

I've robbed that solution from myself, and fit it to your case.

Note that the line-height and padding adjustments can be very tricky to get right.

See: http://jsbin.com/ahoyug

HTML:

<div class="greenbox">
    <a href="#"><span><span>
        The Title Goes Here, with overflow
    </span></span></a>
</div>

CSS:

.greenbox {width:500px; height:200px; position:relative; background:green}

.greenbox > a {
    font: 50px sans-serif;
    line-height: 1.14;
    padding: 0;
    border-left: 20px solid #000;
    position: absolute;
    left: 0;
    bottom: 60px;
    text-decoration: none;
    color: #fff
}
.greenbox > a > span {
    background: #000
}
.greenbox > a > span > span {
    position: relative;
    left: -10px
}

Background color on text, maintain left padding on line wrap

Add to the span:

box-shadow: 10px 0 0 black, -10px 0 0 black;

Or Just:

box-shadow: -10px 0 0 black;

Used this myself after finding it here:

http://css-tricks.com/multi-line-padded-text/

There are many other methods by which this can be done listed there.

How to include padding on a span element that has multiple lines

You can try faking the background when the span is broken by using box-shadow. Try something like this and see if it works for you:

span {

    background-color: yellow;

    padding: 1px 0;

    box-shadow: 10px 0 0 0 yellow, -10px 0 0 0 yellow;

}

<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a nisi ipsum. Mauris convallis dapibus diam ac sollicitudin. Vivamus varius nulla magna, ac rutrum nulla accumsan quis. Duis placerat, elit non posuere elementum, tellus massa pellentesque nunc, eu maximus ligula metus non dui. Sed accumsan quam nec sodales sagittis.</span>

span background-color is not working for last character space

you can do that with white-space property

<span style="white-space:pre-wrap;background-color: #C8C8C8 !important;">Test </span>

How to background a div without the padding area

If you are able to access the HTML try:

.mgmtError {

  width: 716px;

  float: left;

  padding: 10px;

  text-align: center;

  background-color: blue;

}

.mgmtError div {

  background-color: #FF0000;

}

<div class="mgmtError">

  <div>Content</div>

</div>

CSS span padding & background in h1

Based on your comment, the best I can do is add white-space:pre-wrap; to .bg-box. This gives you the desired space to the right of line ends but unfortunately doesn't add space to the left of a new line.

Example

How to stretch the background color to be width of the parent container after applying padding to it-CSS

A negative margin could help.

.main > div {
  margin-left:-20px;
  margin-right:-20px;
}

http://jsfiddle.net/btjpk5f0/5/

[EDIT:]
You cannot stretch the background without enlarging the div, but you may add the same padding to inner elements:

.main > div {
  margin-left:-20px;
  margin-right:-20px;
  padding-left:20px;
  padding-right:20px;
}

Look here: http://jsfiddle.net/btjpk5f0/11/

text background new line padding issue

You could apply display: inline-block but that will turn the background color into an ugly box which doesn't look as nice as having an exact width background for each line. Unfortunately CSS doesn't let us target individual lines except for the first one.

If you don't mind getting a little "creative" (or hacky) you could wrap each word in its own element in the backend or using JavaScript and apply the background color to those elements. Adjust the parent's word-spacing accordingly to eliminate gaps.

.main {

  font-family: sans-serif;

  font-weight: bold;

  background-color: #99c;

  display: flex;

  height: 400px;

  flex-direction: row;

  align-items: center;

}

.text-container {

  max-width: 500px;

  display: inline-block;

  word-spacing: -15px;

  position: relative;

  padding-left: 20px;

  overflow: hidden;

}

.text-container::before {

  content: '';

  background-color: black;

  position: absolute;

  top: 0;

  left: 0;

  width: 20px;

  height: 100%;

  z-index: 1;

}

span {

  font-size: 36px;

  line-height: 1.5em;

  color: white;

  background-color: black;

  padding: 0.25em 0.5em 0.25em 0;

  max-width: 360px;

}

<div class="main">

  <div class="text-container">

    <span>A</span> <span>Movie</span> <span>in</span> <span>the</span> <span>park:</span> <span>Kung</span> <span>Fu</span> <span>Panda</span>

  </div>

</div>

CSS - background-color element issue - circle shows as oval

Try to add :

display: inline-block;
  line-height: 14px;
  text-align: center;

inside .label__choice__remove

Main problem was that span is inline element, thus width/height won't work`

Here's updated snippet: https://jsfiddle.net/mmagL4p1/2/

Edit the height of the background-color of span / inline text

You can use a vertical linear-gradient with transparent top and bottom color (I've used red in the example).

The height of the element is 2em because of the line-height, so 1.8em is 90%. Create a gradient with two transparent strips (red in the demo) of height 5% each. The rest of the 90% will be the highlight color.

.highlight {

  font-family: 'Roboto', sans-serif;

  font-weight: 300;

  font-size: 1.5em;

  background: linear-gradient(to bottom, red 5%, #4db6ac 5%, #4db6ac 95%, red 95%);

  line-height: 2em;

}

<span class="highlight">Some highlighted text</span>

Span Background-Color & Padding Problems