CSS текст пробел пробел пробел

Question

Я пытаюсь добавить прозрачный фон png к некоторому динамическому тексту и дать ему прописку 15 px на всем протяжении предложения.

Как вы можете видеть на фотографии, класс span не знает, как добавить отступы в текст, который не имеет разрыва строки. Этот текст является частью слайд-шоу Views, и он меняется каждые несколько секунд. Я хотел бы добавить прописку слева, справа и после разрыва предложения. См. Образец ссылки. Я слышал, что мне может понадобиться использовать php, поскольку он может считать символы и добавлять дополнения. Кто-нибудь знает способ сделать это. Если я даю это дополнение класса span, он дает только отступы к фронту и концу предложения, но не после разрыва строки.

http://visiongem.com/portfolio/span-class-help.jpg

HTML, и CSS ниже:

.blueback {background-image:url(images/transparentback.png);} 



<div id="sliderhome"><div id="slidertitle"><span class="blueback">[title]</span> 
</div><div id="featureslider-list"><ul class="homepage-featureslider-list"> 
<span class="blueback"><li>[field_linkto_story_url]</li> 
<li>[field_linkto_photo_url]</li> 
<li>[field_linkto_video_url]</li></div> 
</ul></span></div> 

Answer 1

добавить padding к тексту, а затем отобразить свойство в table

.css{ 
    padding:10px; 
    display:table; 
} 

Answer 2

Проблема с этим в том, что это встроенный элемент. Я думаю, что должен быть блок inline- -level-element, по крайней мере, чтобы гарантировать, что каждый браузер будет чувствовать добавление отступов по сторонам.

span {display: inline-block; padding: 6px 8px;/* Я склонен определять горизонтальные и вертикальные индивидуальные значения, потому что он помогает в гармонической пропорции * /}

Когда я просматриваю разметку с указанным выше стилем в сафари, он работает. Могу ли я изменить тип дисплея на простое, он также работает, но выглядит немного по-разному. Я думаю, что каждый браузер будет иметь особый способ интерпретации этих атрибутов. Но может быть причина, почему никто не сделает это по вашим потребностям. Если вы выделите одно слово в предложении с маркером, правильно сделанное, вы просто перейдете от первой до последней буквы, а не выделите пробелы внутри, потому что они обрезают грани окружающих слов. В любом случае текстовый маркер будет иметь свой собственный размер наконечника, который текст, на котором он используется, не влияет на это - это может привести к тому, что верхние и нижние значения дополнений будут приняты в любом случае.

Я думаю, что это один из случаев, когда браузер немного непредсказуем из-за мыслей, на которых основана их реализация.

EDIT: Извините! Мне было слишком поздно публиковать. Подобная таблица, как упомянуто выше, может также помочь.