Geek asks and answers

Background color in the text, support for left laying on the line

I am trying to create a style that applies background color to the title text. It's simple enough to include an inline element inside my heading, but problems arise when there is line break, because left padding only applies to the first line of text. To solve this problem, I apply a left border to my header tags, which properly supports left padding during line wrappers. However, I am having serious problems corresponding to the height of the left border with the background of inline elements in browsers. I pick it up in Chrome / Safari and it is disabled in Firefox etc. I created a fiddle to demonstrate:

http://jsfiddle.net/spidercoder/4KJn2/1/

My approach:

HTML:

<h1><span>Lorem ipsum dolor sit amet consectetur adipiscing elit.</span></h1>

CSS

h1{
color: white;
text-transform: uppercase;
font-family: sans-serif;
font-size: 34px;
line-height: 44px;
border-left: 10px solid black;
padding: 8px 0 7px 0;} // This tweaks the height of the left-border

h1 span{
white-space: pre-wrap;
background: black;
padding: 10px 10px 10px 0;}

, , , . , , .

- , , ? , , , , .

!

+3
4

span:

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

:

box-shadow: -10px 0 0 black;

, :

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

, , .

+4

, span h1 . - :

overflow: hidden;

h1.

0

Demo on jsFiddle .

HTML

<div class="padded-multiline">
    <h1><span>Lorem ipsum dolor sit amet consectetur adipiscing elit.</span></h1>
</div>

CSS

.padded-multiline {
    line-height: 1.3; 
    padding: 2px 0; 
    border-left: 20px solid #000;
    width: 400px;
    margin: 20px auto;
}
.padded-multiline h1 { 
    background-color: #000;
    padding: 4px 0 5px;
    color: #fff; 
    display: inline;
    margin: 0; 
}
.padded-multiline h1 span { 
    position: relative;
    left: -10px; 
}
0
source

Use the margin-left field instead of border-left.

h1 {
  font-size: 3em;
  line-height: 1em;
  margin-left: 15px;
}

h1 span {
    background: rgb(241,241,241);
    box-shadow: 15px 0 0 rgb(241,241,241), -15px 0 0 rgb(241,241,241);
  }

I made a demo http://jsfiddle.net/pa8J8/

0
source

More articles:


All Articles