Есть ли способ закрасить каждое слово?

199

10 декабря 2016, 10:31

К примеру есть такая конструкция :

div{ 
  width:300px; 
} 
p span{ 
 background:#cc0000; 
 padding:0 10px; 
 border-radius:8px; 
 word-wrap:break-word; 
 color:#cc0000; 
} 
::selection{ 
  color:transparent; 
  background:transparent; 
} 
::-webkit-selection{ 
  color:transparent; 
  background:transparent; 
} 
::-moz-selection{ 
  color:transparent; 
  background:transparent; 
} 
p{ 
  line-height:22px; 
}

<div> 
<p> 
 <span> Praesent </span><span>sapien</span> <span>massa,</span> <span>convallis</span><span> a pellentesque</span> <span>nec,</span><span> egestas non nisi. </span><span>Vestibulum</span><span> ac diam </span><span>sit amet quam</span> <span>vehicula</span><span> elementum sed</span><span> sit amet dui.</span><span> Praesent sapien</span> <span>massa, convallis</span><span> a </span><span>pellentesque nec,</span><span> egestas non nisi.</span> 
</p> 
</div>

Но если каждое слово поместить в тег  без  то лично у меня ни чего не получается , т.е надо каждое слово сделать не видимым как в примере Выше но при этом что бы текст был расположен просто в теге ,.Как добиться этого же без вложенных ?

Answer 1

Подобного результата можно достичь подменой шрифта на BLOKK

UPD: А вот и решение с помощью Shadow DOM, о котором я писал в комментариях (было интересно попробовать реализовать):

window.addEventListener('DOMContentLoaded', function() { 
  var target = document.querySelector('p'), 
    wordSet = target.textContent.match(/[^\s]+/g), 
    shadowHTML = '', 
    shadowRoot = target.createShadowRoot(); 
 
  wordSet.forEach(function(word) { 
    shadowHTML += ` <span>${word}</span> `; 
  }); 
   
  shadowRoot.innerHTML = shadowHTML; 
   
  /* Как видим, содержимое элемента не изменилось ;D */ 
  console.log(target.innerHTML); 
});

p { 
  width: 300px; 
   
  -webkit-touch-callout: none; 
    -webkit-user-select: none; 
     -khtml-user-select: none; 
       -moz-user-select: none; 
        -ms-user-select: none; 
         -o-user-select: none; 
            user-select: none; 
} 
p::shadow span { 
  margin: 2px; 
  padding: 0 5px; 
  display: inline-block; 
  font-size: .8em; 
  color: transparent; 
  background: #cc0000; 
  border-radius: 8px; 
  word-wrap: break-word; 
}

<p> 
  Praesent <i>sapien massa</i>, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet <b>quam</b> vehicula elementum sed sit amet dui. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. 
</p>

Вот что мне помогло в его достижении:

Shadow DOM
Стили и селекторы

Создание интернет-магазина посуды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как сделать выпадающий список по клику? [закрыто]

Верстаю сортировку, нужно чтобы список выпадал при клике и выбирался нужный пунктКак это сделать? Буду благодарен за помощь

298

HTML

Как сделать кнопки + и - для edit? [закрыто]

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

195

HTML

Постановка ударения в html

Пытаюсь поставить ударение над заглавной буквой "У" в шрифте Open Sans Condensed, но при его постановке шрифт буквы У меняется на другойЯ не могу понять:...

216

HTML

При вставке тега <img> код слетает

Здравствуйте! Имеется код, который заменяет значение в определенном блоке:

223