Создание эффекта подсветки текста с помощью отступов с помощью CSS - PullRequest
Новая
       2

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

14 голосов
/ 26 мая 2011

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

Пример:

highlighted text effect

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

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

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

Added Padding

CSS: 

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

Кто-нибудь знает, как это сделать?

Ответы [ 7 ]

21 голосов
/ 01 мая 2013

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

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

.highlight {
    color:#fff;
    background:#000;
    box-shadow:5px 0 0 #000, -5px 0 0 #000;
    padding: 5px 0;
}
8 голосов
/ 20 октября 2014

Вот метод достижения многострочного, выделенного, выделенного поведения для текста с использованием только CSS.

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

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

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

Для получения дополнительной информации см .: 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>
5 голосов
/ 17 августа 2013

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

.highlight {
    background: black;
    color: white;
    box-shadow: 0 0 0 5px black;
}
2 голосов
/ 18 февраля 2012

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

&nbsp;

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

1 голос
/ 08 июня 2017

вы можете использовать box-украшение-перерыв 

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

рабочий образец кодовая ручка

0 голосов
/ 30 июля 2018

Если это «заголовок» или что-то подобное, и он переносится, потому что контейнер жидкий, почему бы не установить цвет фона для контейнера, тогда, когда / если ваш текст / заголовок переносится, все пространство между строками текст, а также длина текстовой строки будут выглядеть одинаково. 

<html>
<head><title>...blah...blah</title>
<style type="text/css" title="text/css">
#masthead{
    background-color:black;
    color: white;
}
#masthead h1{
    text-transform:uppercase;
}
#container{
    background-color:red;
}
</style>
</head>
<body>
<div id="container">
  <div id="masthead">
    <h1>some sort of title goes here</h1>
  </div>
</div>
</body>
</html>

Кроме того, вы можете, вероятно, просто улучшить текст в теге h1 стилями полей / отступов, чтобы получить нужный вид.

0 голосов
/ 26 мая 2011

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...