2

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

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>

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

5
  • 1
    Вряд ли такое возможно, текстовая нода не имеет форму и параметры отображения на нее не распространяются
    – qodunpob
    12 авг 2016 в 1:33
  • 1
    быть может там Shadow DOM?
    – qodunpob
    12 авг 2016 в 1:51
  • 1
    как я полагаю, стили остаются те же, только с помощью JS текст разбивается на массив слов, а затем склеивается, но уже с оборачиванием слов в span. А чтобы не портить контент, мне кажется, можно полученный результат поместить в Shadow DOM. Я раньше с ним и сам не работал (не было прецедента), но вопрос интересный, попозже попробую накидать пример )
    – qodunpob
    12 авг 2016 в 1:59
  • 1
    ruseller.com/lessons/les2094/demo/index2.html вот он этот пример
    – user33274
    12 авг 2016 в 2:16
  • 2
    Ахаха, там все гораздо проще =) Это шрифт такой =)
    – qodunpob
    12 авг 2016 в 2:27

1 ответ 1

4

Подобного результата можно достичь подменой шрифта на 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>

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

4
  • если скажем не использовать этот шрифт ,то есть варианты ? желательно пример с 10 словами
    – user33274
    12 авг 2016 в 3:56
  • @Geyan я же предложил альтернативный вариант при помощи JS. Правда тут надо учитывать, что Shadow DOM прожует не каждый браузер, да и шаблонный строки надо будет поменять на обычные, а то опять же фича новая, не всеми поддерживается.
    – qodunpob
    12 авг 2016 в 4:11
  • Костя - ты можешь мне пояснить кое что ??
    – user33274
    12 авг 2016 в 4:22
  • @Geyan chat.stackexchange.com/rooms/43848
    – qodunpob
    12 авг 2016 в 4:26

Ваш ответ

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