0

Кто-нибудь знает, как сделать вот так эффект в 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;
}

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

1
  • Можно немного автоматизировать с помощью JS. Примитивный пример, но суть должна быть ясна - jsfiddle.net/o1r95hcm
    – Deonis
    4 дек 2022 в 14:01

2 ответа 2

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>

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>

Ваш ответ

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

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