Можете ли вы применить CSS только к переносимому тексту, то есть ко второй и последующим строкам? - PullRequest
19 голосов
/ 31 марта 2011

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

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

Пример

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

Входные данные и метка находятся в 1 делении, а текст обернут во вторую строку, что я и хочу
но можно ли оставить поле слева только для текста, обернутого во вторую строку

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

Ответы [ 4 ]

38 голосов
/ 31 марта 2011

Да, вроде бы - я бы предложил объединить 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 голосов
/ 31 марта 2011

Нет, но вы можете применить CSS к первой строке, чтобы вы могли изменить свое мышление для достижения того же эффекта.

Примерно так:

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

Вот пример работы JSFiddle: http://jsfiddle.net/4ckxJ/3/

См. http://www.quirksmode.org/css/firstline.html для получения дополнительной информации о псевдоклассе :first-line.

0 голосов
/ 31 марта 2011

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

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

0 голосов
/ 31 марта 2011

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

display: block;
margin-left: 12px;

Если указать display: block, он будет перенесен на новую строку, а поле сдвинет ее вправо.

...