7

テキストを含むスパン要素があります。テキストの背景色を単色にし、各行の開始/終了を同じ量のパディングで行いたいです。

この jsfiddle は問題を示しています: http://jsfiddle.net/VwsQg/

この非常によく似た質問を見つけました:テキストの各行の先頭と末尾にパディングを追加しますが、各行の間にもスペースが必要です。

この画像は、私が達成しようとしている結果を示しています。

ここに画像の説明を入力

前もって感謝します。

4

2 に答える 2

6

これは、JavaScript や各行の追加要素を使用せずに実行できます。

HTML

<span class="marker"><span class="marker"><span class="marker">
    consectetur adipiscing elit. Nam at sem eu ligula porttitor iaculis volutpat
    non lacus.
</span></span></span>

CSS

.marker {
    background: #f77;
    padding: 3px 0;
    position: relative;
    left: -10px;
    line-height: 30px;
}

.marker .marker { left: 20px; }

.marker .marker .marker { left: -10px; }

フィドル 3tP8mでどのように機能するかを確認してください。

注:要素の祖先は、この要素を正しく含むようにする.marker必要があります。padding

この技術の功績はすべて Artem Polikarpov に帰属します。彼の元のアドバイスを参照してください: 「柔軟な最下層のテキストをマークアップする方法」 (ロシア語) .

于 2012-09-08T14:21:45.683 に答える
0

これが機能する唯一の方法は、テキストを分離し、それらすべてにクラスを追加することです。これはjqueryで実行できます。テキストが収まらない場合は、divの終わりの長さをチェックしてクラスを追加する必要があります。

于 2012-09-08T13:01:09.470 に答える