0

基本的に私がやりたいことは、以下の例を考慮して、複数行のテキスト サイズに応じて流動的で動的な背景幅を作成することです。これは、正当化されたテキストの配置を設定し、ある時点 (たとえば 2 行目) で、テキストが背景の幅全体を埋めていないためです。これは、より大きな上の文によって拡大されます。背景でいっぱいになりたくない！私が自分自身を明確にしているかどうかはわかりませんが、以下の例で説明しようとします.

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;       
}

ご覧のとおり、最後の青い四角にはテキストが 2 行に分かれています。灰色がかった背景は、最初の行に基づいて幅を埋めます。私がやりたいことは、2 行目で、その行のテキストだけが灰色で塗りつぶされることです。

例: 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 に答える