Форматирование текста в CSS

Question

Кто-нибудь знает, как сделать вот так эффект в css? Я пробовал через border и накладывал фон, но он просто выделяет целое предложение, а не слова по отдельности

h1 {
    position: fixed;
    top: 22%;
    left: 0;
    right: 66.5%;
    margin-left: 6%;
    border: solid;
    border-radius: 15px;
    background-color: rgb(240, 128, 128);
    transition: .7s ease-in;
}

Вот то, что должно получиться:

Answer 1

Я вижу только такой вариант - через обёртывание каждого слова в span

h1 {
  width: 350px;
  line-height: 1.5;
  color: rgb(240, 128, 128);
}

h1 span {
  padding: 2px 5px;
  color: white;
  background-color: rgb(240, 128, 128);
}

<h1><span>The</span> <span>best</span> <span>and</span> <span>most</span> <span>beautiful</span> <span>things</span> <span>in</span> <span>the</span> <span>world</span> <span>cannot</span> <span>be</span> <span>seen</span> <span>or</span> <span>even</span> <span>touched</span>          - they</h1>

Answer 2

Вот удобная реализация через JS:

class SplitText {
  constructor(text, last) {
    this.text = text
    this.last = last
  }

  create(color, textColor) {
    let text = this.text.split(' ').filter(e => e)
    let splitted = document.createElement('div')
    let last = document.createElement('div')

    last.textContent = '- ' + this.last
    last.style.color = color
    last.className = 'splitted-last'

    splitted.className = 'splitted'

    text.forEach(e => {
      let word = document.createElement('div')
      word.className = 'splitted-word'
      word.style.backgroundColor = color
      word.style.color = textColor
      word.textContent = e
      splitted.appendChild(word)
    })

    splitted.appendChild(last)

    return splitted
  }
}

let text = 'The best and most beautiful things in the world cannot be seen or even touched'
let last = 'they'

let splittedText = new SplitText(text, last)
  .create('var(--bg-color)', 'rgb(255, 255, 255)')

let $text = document.querySelector('#text')

$text.appendChild(splittedText)

:root {
  --bg-color: rgb(255, 74, 73);
}

.splitted-word, .splitted-last {
    display: inline-block;
    margin: .125em;
    padding: .125em;
    font-weight: 600;
    font-size: 42px;
}

<div id="app">
  <div id="text"></div>
<div>

БЛОГ НА HUSL

Форматирование текста в CSS

Ответы (2 шт):