html – 你可以仅对包裹的文本(即第二行和后续行)应用CSS吗?

前端之家收集整理的这篇文章主要介绍了html – 你可以仅对包裹的文本(即第二行和后续行)应用CSS吗?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想把一个边距留给只包含文本,即第一行之后的文本:
This is text with no margin left
     this text has margin left

click to see

输入和标签是1 div,文字包裹在第二行,这就是我想要的
但是可能只有在第二行包装的文本上留下一个边距

jsfiddle example of my problem

解决方法

是的,我建议将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;
}

文本缩进仅适用于块级元素中的第一行文本,因此它应该实现您想要的.

http://jsfiddle.net/pauldwaite/qUvvv/

猜你在找的HTML相关文章