Можете ли вы применить CSS только к тексту, который завернут, т.е. Второй и последующих строк?

Я хочу поставить margin-left только на текст, который завернут, т.е. текст после первой строки:

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

Пример

нажмите, чтобы увидеть

Ввод и метка находятся в 1 div, а текст завернут на вторую строку, что я и хочу
но возможно ли иметь значение, оставшееся только на тексте, который завернут во вторую строку.

jsfiddle пример моей проблемы

Ответ 1

Да, вроде - Id предлагает комбинировать 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/

Ответ 2

Нет, но вы можете применить 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.

Ответ 3

Вы можете обернуть строку, которую хотите обернуть, в span и применить:

display: block;
margin-left: 12px;

Предоставление display: block приведет к тому, что оно будет перенесено на новую строку, а маржа отбросит его вправо.

Ответ 4

согласно вашему обновленному примеру, здесь fork JSFiddle

поплавьте вход, а затем сделайте блок отображения меток таким образом, чтобы он плавал прямо рядом с ним - расстояние, созданное с помощью отступов и полей, overflow:hidden делает текст "не обертыванием" - тогда вы также можете удалить br из вашего HTML