Создание эффекта выделения текста с помощью прокладки с использованием CSS

Я пытаюсь создать выделенный текстовый эффект с разрывом строки.

Пример:

Я не могу понять, как добавить дополнение к тексту. Вот CSS для элемента span, который содержит текст:

background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 24px;
padding-left: 5px;

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

CSS

background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 3em;
padding: 10px;

Есть ли у кого-нибудь идеи о том, как это сделать?

Ответ 1

У меня был такой же вопрос, и я сделал некоторую охоту и нашел чистое CSS-решение, для которого требуется лишь немного CSS: CSS создать прокладку до линейного разрыва

Основным решением является заполнение сверху и снизу и тень сплошного ящика для ввода левой и правой сторон текста, например:

.highlight {
    color:#fff;
    background:#000;
    box-shadow:5px 0 0 #000, -5px 0 0 #000;
    padding: 5px 0;
}

Ответ 2

Здесь показан способ достижения многострочного, дополненного, подчеркивающего поведения для текста, используя только CSS.

Это основано на методе box-shadow, найденном в другом месте, однако с Firefox 32 традиционное решение box-shadow больше не отображается правильно.

Пересмотрев журнал изменений для FF32, я нашел там новое свойство: box-decoration-break, который вызывает поломку.

Это свойство по умолчанию имеет значение "split", но его нужно указать как "clone" для достижения требуемого эффекта многострочного дополнения.

Подробнее см.: https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break

.box {
  width: 50rem;
  margin: 1rem auto;
  font-family: arial, verdana, sans-serif;
}

h1 {
  color: white;
  font-size: 2.5rem;
  line-height: 4rem; /* reduce size to remove gap between text */
  margin: 0px;
}

h1 span {
  background-color: #A8332E;
  padding: 0.5rem 0;
  -webkit-box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
  box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
  -webkit-box-decoration-break:clone;
  -moz-box-decoration-break:clone; 
  box-decoration-break: clone;
}

<div class="box">
  <h1>
    <span>Multi-line, padded, highlighted text that display properly in Firefox using box-decoration-break: clone</span>
  </h1>
</div>

Ответ 3

Основываясь на решении Brandon, я понял, что вы можете вообще полностью отказаться от дополнения и делать это исключительно с помощью опции с расширением box-shadow и заполнение на обернутых встроенных элементах ведет себя так, как вы ожидаете.

.highlight {
    background: black;
    color: white;
    box-shadow: 0 0 0 5px black;
}

Ответ 4

Просто добавьте:

&nbsp;

Если пространство в текстовой области - это все, что вы ищете.

Ответ 5

вы можете использовать box-decoration-break

-moz-box-decoration-break:clone; 
-webkit-box-decoration-break:clone;
box-decoration-break:clone;

рабочий образец codepen

Ответ 6

Добавьте дополнение для окружающего элемента уровня блока (например, div или td) и удалите заполнение из вашего диапазона.