CSS 只对第一行应用边距

Question

我有一个图标集，它使用 CSS 类来相应地显示它们。比如，这个:

<div class="icon anchor">This is some text!<br>This is some text!</div>

这将显示图标，但由于图标是背景图像，文本必须移到一边，以腾出空间，使文本不会覆盖图像。这就是我的问题所在。文本被移到一边，但是所有 文本都被移到一边。我只想 move 需要的(可能是第一行)。这是我的 CSS:

.icon {
    background-repeat: no-repeat;
    padding-left: 17px;
}
.icon.anchor{ 
    background-image: url(fugue-icons-3.0-src/icons/anchor.png); 
}

Answer 1

如果您想缩进第一行文本，那么正确的 CSS 属性是 text-indent属性(property)。它将左边距(或从右到左语言中的右边距)设置为任何 block 容器的第一行。在这种情况下，CSS 将是

.icon {
    background-repeat: no-repeat;
    text-indent: 17px;
}
.icon.anchor{ 
    background-image: url(fugue-icons-3.0-src/icons/anchor.png); 
}

See it in action at jsFiddle .