您可以只对被包装的文本（即第二行和后续行）应用CSS吗？ [英] Can you apply CSS only on text that is wrapped, i.e. the second and subsequent lines?

问题描述

我想在封装的文字（即第一行之后的文字）上放置 margin-left ：

I want to put a margin-left on only the text that is wrapped, i.e. text after the first line:

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

示例

点击查看

输入和标签都在1 div中，文本被包装在第二行，这是我想要的
，但是

The input and the label are in 1 div and text is wrapped on the second line, which is what I want
but is it possible to have like a margin left on only the text that is wrapped on the second line

jsfiddle我的问题示例

推荐答案

是的，我建议将 padding-left 和 text-indent ：

<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

 CSS

.test {
    width:200px;
}

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

text-indent 仅适用于块级元素中的第一行文本，因此它应该实现您想要的。

text-indent applies only to the first line of text in a block-level element, so it should achieve what you want.

请参阅 http://jsfiddle.net/pauldwaite/qUvvv/

这篇关于您可以只对被包装的文本（即第二行和后续行）应用CSS吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！