CSSスタイルをテキストのみに適用する方法

Question

HTMLのようなテキストにスタイルを適用しようとしています。私が欲しいのは、基本的には次のとおりです。

私は何を得る基本的には次のとおりです。

あなたが見ることができるように、最初の行が他の行インデントではなく。これまでのところ、私は<span>の中のテキストを持っていて、それは<div>の中にネストされています。

.slide-text .text { 
 
    background-color: rgba(0, 0, 0, .6); 
 
    color: #FFF; 
 
    padding: 8px 17px; 
 
} 
 
.slide-text .slide-title { 
 
    font-family: "Titillium Web", Arial, Helvetica, sans-serif; 
 
    font-weight: 700; 
 
} 
 
.slide-text .slide-content { 
 
    font-family: "Open Sans", Arial, Helvetica, sans-serif; 
 
    font-weight: 500; 
 
}

My HTML code is: 
 
<div class="slide-text"> 
 
    <div class="slide-title"><span class="text">[TITLE]</span> 
 
    </div> 
 
    <div class="slide-content"><span class="text">[TEXT]</span> 
 
    </div> 
 
</div>

彼らは限りタイトルや内容でもないが、複数行あるとして、素晴らしい仕事。 2つ以上のラインを通過すると、スパンは内側のパディングを失います。内部スパンをdisplay: inline-block;に変更すると、2つのラインに入るとすぐにブロックが表示されます。私が探している効果を得る方法はありますか？

Answer 1

CSSの達人Chris Coyierには、CSS-Tricks listing several methods to solve thisに関する記事があります。 1つの方法はbox-shadowの方法です。それはすでに答えとして言及されていますが、現代的なFirefoxで働くにはもう少し愛が必要です:)。

.multi-line-padded { 
 
    background: black; 
 
    color: white; 
 
    
 
    /* For the top and bottom padding */ 
 
    padding: 0.5em 0; 
 
    
 
    /* Text height (1.0) + compensate for padding (0.5 * 2) */ 
 
    line-height: 2; 
 
    
 
    /* For the left and right padding */ 
 
    /* Vendor prefixes FIRST */ 
 
    -webkit-box-shadow: 1em 0 0 black, -1em 0 0 black; 
 
    -moz-box-shadow: 1em 0 0 black, -1em 0 0 black; 
 
    box-shadow: 1em 0 0 black, -1em 0 0 black; 
 
    
 
    /* Firefox defaults to `box-decoration-break: split`, we need `clone` */ 
 
    box-decoration-break: clone; 
 
}

<p><span class="multi-line-padded">You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder.</span></p> 
 

 
<p style="text-align: right;"><span class="multi-line-padded"><a href="http://slipsum.com/" style="color: white;">Samuel L. Ipsum</a></span></p>

Answer 2

this similar questionによく答えてください。基本的には、ボックスシャドウを使用してパディングを作成することを提案しています。

span { 
    background:#ff0;color:#000; 
    box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0; 
    -moz-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0; 
    -webkit-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0; 
} 

が均等にあなたのすべてのテキストをインデントし、（あなたが必要とする任意のHTMLカラー値に#ff0を変更）、黄色のパディングを追加します。ただし、既存のコードを再フォーマットする必要があります。これは、それが影よりもインデントされるためです。