web-dev-qa-db-ja.com

折り返されているテキスト、つまり2行目以降にのみCSSを適用できますか？

折り返されているテキスト、つまり最初の行の後のテキストにのみmargin-leftを配置したいと思います。

This is text with no margin left
     this text has margin left

例

クリックして表示

入力とラベルは1divにあり、テキストは2行目に折り返されます。これが私が望むものです。
ただし、2行目に折り返されているテキストだけに余白を残すことは可能ですか

私の問題のjsfiddleの例

htmlcsslayoutword-wrap
20
Kevin

ええ、ある種— padding-leftとtext-indentを組み合わせることをお勧めします。

HTML

<div class="test">
    <label for="2question1">
        <input type="checkbox" id="2question1" name="2question" title="Merknaam 1" /> Very long text which is wrapped on the next line
    </label><br>

    <label for="2question2">
        <input type="checkbox" id="2question2" name="2question" title="Merknaam 2" /> Merknaam 2
    </label><br>

    <label for="2question3">
        <input type="checkbox" id="2question3" name="2question" title="Merknaam 3" /> Merknaam 3
    </label><br>

    <label for="2question4">
        <input type="checkbox" id="2question4" name="2question" title="Merknaam 4" /> Merknaam 4
    </label><br>
</div>

CSS

.test {
    width:200px;
}

.test label {
    display: block;
    padding-left: 1em;
    text-indent: -1em;
}

text-indentは、ブロックレベル要素のテキストの最初の行にのみ適用されるため、目的を達成する必要があります。

http://jsfiddle.net/pauldwaite/qUvvv/ を参照してください

39
Paul D. Waite

いいえ。ただし、canは最初の行にCSSを適用できるため、考え方を逆にして同じ効果を得ることができます。

このようなもの：

.mytext {margin-left:-5em;}
.mytext:first-line {margin-left:0;}

これが機能するJSFiddleの例です： http://jsfiddle.net/4ckxJ/3/

:first-line疑似クラスの詳細については、 http://www.quirksmode.org/css/firstline.html を参照してください。

2
Spudley

折り返したい行をspanで折り返し、以下を適用できます。

display: block;
margin-left: 12px;

それを与えるdisplay: blockは改行に折り返し、マージンはそれを右に押し出します。

0
Kevin

更新された例によると、ここに フォークJSFiddle

入力をフロートさせてから、ラベル表示ブロックを作成して、そのすぐ横にフロートさせます-パディングとマージンで作成された間隔、overflow:hiddenは、テキストを「折り返さない」ようにします-次に、HTMLからbrを削除することもできます。

0
clairesuzy