Is there a way to paint over every word?

Question

For example, there is such a construction:

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>

But if you put each word in the  without  then personally I don’t have anything, that is, you need to make each word not visible as in the example above, but at the same time that the text was located just in the  . How to achieve the same without nested  ?

This is hardly possible, the text node does not have a form and the display options do not apply to it
as I suppose, the styles remain the same, only with the help of JS the text is broken into an array of words, and then glued together, but already with the words wrapped around the span.
And in order not to spoil the content, it seems to me that the result can be put in the Shadow DOM.
I hadn’t worked with him myself before (there was no precedent), but the question is interesting, I’ll try to figure out an example later)
ruseller.com/lessons/les2094/demo/index2.html here it is this example
Ahaha, everything is much simpler there =) This is a font like this =)

Accepted Answer · 2016-08-12T02:37:47

A similar result can be achieved by replacing the font on BLOKK

UPD : And here is the solution using the Shadow DOM, which I wrote about in the comments (it was interesting to try to implement it):

 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>

Here is what helped me achieve it:

The truth is that we must take into account that not every browser will live on the Shadow DOM, and the template lines will have to be changed to regular ones, but again, the new feature is not supported by all.

Is there a way to paint over every word?

1 answer 1

More articles: