Можно ли так задать фон строчному элементу?

Question

[Muvka]

Чтобы между слов, при переносе строки, был отступ с фоном?
Вот пример как у меня получается JSFiddle
Но тут после первого слова идет резкая обрезка фона. И перед вторым словом тоже. Можно сделать, чтобы перед вторым словом был такой же отступ, как и перед первым? Надеюсь смог объяснить проблему

Answer 1

[AngReload]

box-decoration-break: clone;

Comments

[Muvka]

ДА. То, что и требовалось. Огромное вам человеческое спасибо!

[AngReload]

Muvka, это работает только в нескольких браузерах
https://caniuse.com/#feat=css-boxdecorationbreak
Точнее не работает в IE и Edge.

[Muvka]

Я уже проверил на caniuse. Но беды в ие и Edge не будет, просто будет не так красиво. Зато в подавляющем большинстве браузеров все будет как надо.

Answer 2

[Алексей Пахомов]

Если правильно понял вопрос, то перенесите padding в родительский блок

body {
  max-width: 100px;
  padding: 0 10px;
}
h1 {
  display: inline;
  font-size: 30px;
  line-height: 30px;
  color: #fff;
  background-color: #ee1825;
}

Comments

[Muvka]

Мне надо, чтобы фон был ступенчатым в зависимости от длины слова, но при этом справа и слева от самого слова было немного фона, а не как при обычном поведении, когда фон резко обрезается у начала или конца слова.

[Алексей Пахомов]

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

<div>
  <h1>Текст <br> заголовка</h1>  
</div>

div {
  background-color: #ee1825;
  padding: 0 10px;
  display: table;
}
h1 {
  display: inline;
  font-size: 30px;
  line-height: 30px;
  color: #fff;
}

Ну или сделайте элемент не inline, а table
display: table;