html - lineargradient の問題 - オーバーフローが隣接するテキストと重なっています

Question

フィドルのように背景色に線形グラデーションを使用している場合:

http://jsfiddle.net/dkzn5/

HTMLコードは次のとおりです。

<div class="body">

1本の矢のサンプル

<div class="clear"></div>

はみ出したテキストは非表示にし、表示されるテキストは 1 行に収める必要があります 2

<div class="clear"></div>

バリエーション 2 の右端でテキストが重なっています。

これで私を助けてもらえますか？

Answer 1

.variation2 h2 {
    width:90%;
    margin-right:10%;
}

Answer 2

フォント サイズまたは見出しを小さくする

.variation2 h2{width:90%;}

Answer 3

パディング付きの別のコンテナを追加します。

<div class="variation2 font700 green"> 
    <div style="padding-right: 80px;">
    <h2> overflown text must be hidden and the visible text  must be in single line <span class="divider"> 2 </span> </h2> </div>
    <div class="clear"></div>
    </div>

</div>

http://jsfiddle.net/dkzn5/3/