Search code examples
htmlcsstextword-wrap

HTML/CSS Background color behind text word wrap

I'm not exactly sure how to explain this, but I created this JSFiddle to show the issue.

.news {
    float: left;
    width: 465px;
    height: 260px;
    padding: 0px 7px;
    position: relative;
}
.news .news-title {
    float: left;
    position: relative;
    z-index: 10;
    margin: 10px 20px;
    padding: 10px;
}
.news .news-title h2 {
    color: #FFF;
    text-transform: uppercase;
    font-weight: bold;
    background: #010101;
    font-family: 'Open Sans', sans-serif;
    padding: 10px;
    display: inline;
    word-wrap: break-word;
}
.news img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
<div class="news">
    <div class="news-title"><h2>Lorem ipsum dolor sit amet, consectetur</h2></div>
    <img src="https://dl.dropboxusercontent.com/u/22433338/news_mc.jpg" alt="" />
</div>

<div class="news">
    <div class="news-title"><h2>Lorem ipsum dolor sit amet, consectetur</h2></div>
    <img src="https://dl.dropboxusercontent.com/u/22433338/gmod_news.jpg" alt="" />
</div>

Basically, at the very end of the first line it doesn't do any padding on the right side and on the 2nd line the left side has no padding at all.

I tried using stuff like word-wrap and white-space, but I can't seem to figure out how to fix this.

Solution

  • Check this out

    http://jsfiddle.net/mGQG4/18/

    Essentially you do two things within h2 CSS

    padding: 10px 0; /* change horizontal padding to 0 */
box-shadow: 10px 0 0 red, -10px 0 0 red; /* add this line */

    Should work as requested. Of course, change color from red to #010101 as well.