CSS применяет маржу только к первой строке

Question

У меня есть набор иконок, который использует классы CSS для их отображения соответствующим образом.Как, скажем, это:

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

Это отобразит значок, но, поскольку значок является фоновым изображением, текст должен быть перемещен в сторону, чтобы освободить место, чтобы текст не перешелизображение.Вот где моя проблема.Текст перемещается в сторону, но все текст перемещается в сторону.Я хочу, чтобы только то, что нужно (вероятно, в первой строке), было бы перемещено.Это мой 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 .Он установит левое поле (или правое поле на языках справа налево) на первую строку любого контейнера блока.В этом случае CSS будет

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

Смотрите его в действии на jsFiddle .

Answer 2

А как насчет псевдоселектора :first-line? т.е.

div.icon.anchor:first-line { ... }

Но почему это <div>, а не <p> (или два)?

Answer 3

Сделайте это вместо этого:

http://jsfiddle.net/thirtydot/8uPU5/

HTML:

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

CSS:

.icon {
    background-repeat: no-repeat;
}
.icon.anchor span {
    padding-left: 17px;
}
.icon.anchor{ 
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/0/0b/Vovinam_azzurro_16x16.gif);
}