Подсветка текста (эффект метки) с использованием CSS

Question

Я хочу создать текстовый стиль, похожий на метку. Смотрите здесь:

Я почти могу сделать это, используя: http://jsfiddle.net/STApE/

p{display: inline; background: yellow;}

НО, я хочу добавить отступы. Когда я делаю, дела идут вниз То же самое происходит, если я добавляю границу: http://jsfiddle.net/JN72d/

Какие-нибудь идеи о простом способе достижения этого эффекта?

Answer 1

Я смог добиться этого, немного изменив структуру DOM:

http://jsfiddle.net/Zp2Cm/2/

Answer 2

Оберните каждую строку с интервалом. Установите диапазон на уровне блока. Применение фона и отступов к диапазону.

Answer 3

что вы ищете?

Был немного затянуто! Хенсе 44 в URL. Если вы можете жить без p-тегов, тогда все будет в порядке.

Пример

Answer 4

Вместо <p> вы можете использовать <span> и float:

<style type="text/css">
span {
    float: left;
    background: yellow;
    padding: 3px;
    text-transform: uppercase;
    clear: left;
}
</style>

<span>highlighting the text</span>
<span>like this</span>
<span>using just css</span>
<span>is harder</span>
<span>than it looks</span>

См. пример .

Answer 5

Это сложная задача ...

НО :) Я нашел отличную статью для этого!

С помощью следующих решений вы можете выделить Dinamic text, не используя перенос для каждой строки.

Статья с демонстрациями : http://css -tricks.com / multi-line-padded-text /

Наслаждайтесь!)

Answer 6

Добавьте интервалы к вашему абзацу следующим образом:

<p class="p1">
    <span>Highlighting the text</span><br/>
    <span>like this</span><br />
    <span>using just CSS</span><br />
    <span>is as easy</span><br />
    <span>as it looks.</span>
</p>

И добавьте следующий CSS:

p.p1{display: inline; background: yellow;}
span {padding: 5px; background: yellow; display: inline-block;}

Обратите внимание на атрибут display: inline-block Я раздвоил твой код: http://jsfiddle.net/eliekhoury/JN72d/27/

Answer 7

Можно использовать <pre>? Оставляет это отформатированным, как вы хотите

Answer 8

Я думаю, что вы можете достичь того, что хотите, изменив display:inline на display:inline-block. Это имеет некоторые проблемы совместимости просмотра (в зависимости от вашего целевого набора):

http://www.quirksmode.org/css/display.html