0

Как сделать фон именно под текстом, не покрывая пространство между строк? Нужно сделать вот так:введите сюда описание изображения

но в итоге получается, что заливает весь фон,вот сам код собственно:

#block-for-slider ul li h2{
    position: absolute;
    left: 160px;
    top:140px; 
    font-size: 4.375em;
    color: #000000;
    text-align: left;
    padding: 15px;
    background: #ffea00;
    line-height: 1.1;
    text-transform: uppercase;
}

Перерыл весь инет решения найти не могу буду премного благодарен.


Всё спасибо наконец-то дошло, просто видимо очень долго пытался и запутался в конец, всем спасибо. Поставил span с бэкграундом, и line-height.

4 ответа 4

1

ну как вариант)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  line-height: 1.2;
}

.container__inner {
  font-size: 4rem;
}

.container__text {
  background: #ffeb00;
  margin-bottom: 10px;
  width: max-content;
}

.container__text:last-of-type {
  margin-bottom: 0;
}
<div class="container">
  <div class="container__inner">
    <div class="container__text">Lorem ipsum</div>

    <div class="container__text">Lorem ipsum dolor sit amet.</div>
  </div>
</div>

1

.highlighted {
  color: white;
  font-size: 30px;
  background-color: gray;
  outline: gray solid 0.3em;
}
<span class="highlighted">Пример построчно закрашенного<br>текста</span>

Перенос строк внутри <span> поддерживается. Чтобы сделать видимость выделения "построчно", добавьте свойство line-height.

0

Поместите каждую строку Вашего текста в тег <span>. Потом добавьте этому тегу css-свойство: background-color: yellow;

1
  • Это не помогло возможно вы меня не правильно поняли, мне нужно что бы между строк не было бэкграунда, что бы окрашено все было только вокруг строк как на картинке которую я прикрепил, 20 ноя 2019 в 17:16
0

Всё что нужно, это использовать для текста display: inline, а расстояние полученных "блоков" подгонять при помощи line-height

h1 {
  display: inline;
  background: yellow;
  line-height: 1.25;
}
<h1>Lorem ipsum.<br>Consectetur adipiscing elit.</h1>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.