Как задать ширину всем «p», равную их ширины текста?

Question

[Ingernirated]

Есть куча "p" со словами, при выделении фона у них одинаковая длина, но по размеру слов - разная.
Как им добавить св-во ширины, чтобы каждое отображало фон по размеру текста?
https://jsfiddle.net/xkh5ubjc/

Comments

[Dark Hole]

Пример

[Ingernirated]

Dark Hole: https://jsfiddle.net/xkh5ubjc/

Answer 1

[Александр Пупкин]

<p> // блочный элемент

Можно конечно сделать:

<p> // display:inline; //будет все в строку// добавьте перенос троки <br> после каждого <p>

Может вам все таки лучше подойдет ul li?!

Comments

[Ingernirated]

именно "p" интересует, чтобы в разных местах подкорректировать фон

[Александр Пупкин]

Ну такая чебупеля https://jsfiddle.net/xkh5ubjc/1/

[Ingernirated]

Александр Пупкин: в песочнице вроде, как надо, а в коде он сбивает все отступы и кривой столбик получается

[Александр Пупкин]

Ну тогда не знаю. Может через js устроить гемморой. Представить что 1 символ это 3 пикселя, узнаем сколько символов в строке и задать ширину с заливкой. Что то типо такого бреда https://jsfiddle.net/xkh5ubjc/2/ только через js

[Dark Hole]

Ingernirated: проблемы не ответа, а вашей верстки. А если честно - display: inline-block

[Ingernirated]

Dark Hole: https://jsfiddle.net/xkh5ubjc/8/
как узнать ширину span?

Answer 2

[Ankhena]

1. В p вставить span (можно на js)
span'у задавать цвет при hover

2. Для p задавать display inline или inline-block, но придется дописывать br

Answer 3

[Gennadiy Balachkov]

Да, самое простое - сделать span'ами, помоему.
https://jsfiddle.net/xkh5ubjc/4/

Comments

[Ingernirated]

Как узнать ширину span?
https://jsfiddle.net/xkh5ubjc/8/