文本自动换行后的 HTML/CSS 背景颜色

Question

我不完全确定如何解释这一点，但我创建了这个 JSFiddle 来显示这个问题。

.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>

基本上，在第一行的最后，它不会在右侧进行任何填充，而在第二行，左侧根本没有填充。

我尝试使用自动换行和空格之类的东西，但我似乎不知道如何解决这个问题。

Answer 1

看看这个

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

基本上你在 h2 CSS 中做了两件事

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

应该按要求工作。当然，也可以将颜色从红色更改为 #010101。

Answer 2

这里有更新，
检查，Updated

添加

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

到 .news .news-title h2

Answer 3

对于 HTML / markdown，您可以使用：

<mark style="background-color: blue; color:red;">Test-Driven Development (TDD)</mark>

Answer 4

也许你需要添加line-height: 3;

demo

Answer 5

将背景从“.news .news-title h2”移动到“.news .news-title”;-)

Answer 6

Check this fiddle

I can see padding between images and texts on those images.
line-height: 40px;

Answer 7

正如Yogesh Sharma 在评论中指出的那样，问题在于您的.news .news-title h2 类中有display:inline。如果你删除它，它工作正常。

JSFiddle

Answer 8

您可以使用 box-shadow 来达到预期的效果。 记得修改 h2 上的 padding 并移除那里的水平 padding。

CSS

.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;
}
.news .news-title h2 {
    color: #FFF;
    text-transform: uppercase;
    font-weight: bold;
    background: #010101;
    font-family: 'Open Sans', sans-serif;
    padding: 10px 0 10px 0;
    display: inline;
    line-height:220%;
    word-wrap: break-word;
    box-shadow: 10px 0 0 black, -10px 0 0 black;
}
.news img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

示例

http://jsfiddle.net/mGQG4/27/