0

考虑到下面的示例，基本上我想做的是根据多行的文本大小创建一个流畅和动态的背景宽度。这是因为我设置了一个合理的文本对齐方式，并且在某些点（例如在第二行），文本并没有填满背景的所有宽度，背景的宽度被更大的上句放大。我不想让背景填满它！我不知道我是否让自己清楚，但我会尝试用下面的例子来解释。

http://jsfiddle.net/gcAhL/

HTML

<div class="image">
    <img src="http://s23.postimg.org/g033nno17/image.jpg">
    <div class="title">This is a title</div>    
</div>
<div class="image">
    <img src="http://s23.postimg.org/g033nno17/image.jpg">
    <div class="title">This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title</div>    
</div>

CSS

.image {
    position: relative;
    width: 800px;
    height: 530px;
    margin: 10px;
}
.title {
    position: absolute;
    background-color: #CCC;
    text-align: justify;
    max-width: 600px;
    bottom: 30px;
    padding: 5px;       
}

如您所见，最后一个蓝色方块的文本分成两行。灰色背景填充了基于第一行的宽度。我想要发生的是，在第二行中，灰色仅填充该行的文本。

示例：http ://s9.postimg.org/634pzc9y7/example.jpg

这甚至可能吗？提前感谢所有回复。

4

1 回答 1

1

只需<span>在您的内部使用元素<div>并将背景颜色赋予<span>元素而不是<div>.

HTML

<div class="image">
    <img src="http://s23.postimg.org/g033nno17/image.jpg">
    <div class="title"><span>This is a title</span></div>    
</div>
<div class="image">
    <img src="http://s23.postimg.org/g033nno17/image.jpg">
        <div class="title"><span>This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title This is a title</span></div>    
</div>

CSS

.image {
    position: relative;
    width: 800px;
    height: 530px;
    margin: 10px;
}
span{background-color: #CCC;}
.title {
    position: absolute;
    line-height:100%;
    text-align: justify;
    max-width: 600px;
    bottom: 30px;
    padding: 5px;       
}
于 2013-07-26T02:11:43.203 回答