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