CSS: прерывание строки игнорируется?

Я не знаю, почему это происходит...

<div class="inner">
    <em class="wrapper tiny">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et </em>
</div>

.inner имеет простой левый и правый край. тег em.wrapper имеет отступы.

Я не знаю, почему вторая строка автоматически разбивается на ширину браузера, игнорируя заполнение поля .wrapper?

Любые идеи по этому поводу?

Ответ 1

Тег em по умолчанию равен display: inline. Попробуйте добавить display: inline-block к определению класса.

.wrapper {
  /* ... */
  display: inline-block;
}

Ответ 2

Ваше заполнение установлено на 0

padding: 0 0.75em

означает, что верхняя часть верхнего слоя и нижняя часть нижней части - это 0px, а правая и правая накладки - 0.75em.

обновите эту строку CSS до:

padding : 0.75em