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;

to .news .news-title h2

Answer 3

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

demo

Answer 4

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

Answer 5

Check this fiddle

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

Answer 6

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

JSFiddle

Answer 7

您可以使用box-shadow来获得所需的结果。记得修改h2上的填充并删除那里的水平填充。

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/

Answer 8

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

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