Can i exclude spaces from text decoration? - css

Question

Maybe my question is too simple :) Struggling to exclude &snbsp and spaces from being visualized with strike through:
del {
text-decoration: line-through;
background-color: var(--color-warn-light);
}
So in <del>&nbsp</del> the space is not visualized like a minus '-'.
Is there a possibility that CSS can be used to exclude some characters from being decorated?
Update: found text-decoration-skip: spaces by its is not supported by most browsers :(

Answer 1

As you and #dippas figured out, this is currently not supported via pure CSS across all browsers.
I suggest doing this with JavaScript, by splitting the text you are interested in at the space character into separate span elements. You can then apply your line-through decoration to the span elements, which will not include the spaces.
Here is a simple example:
const elements = document.querySelectorAll("del");
for (let i = 0; i < elements.length; i++) {
const elem = elements[i];
const words = elem.innerText.split(" ");
const spans = words.map((word) => {
const span = document.createElement("span");
span.innerText = word;
return span;
});
elem.innerHTML = "";
spans.forEach((span) => {
elem.appendChild(span);
elem.innerHTML += " ";
});
}
del {
text-decoration: none;
}
del span {
text-decoration: line-through;
}
<div>
<del>All the text to be marked through here</del>
<br />
<del>Additional text to be marked through here</del>
</div>

Answer 2

Inline Block
You can wrap the space in a span with display set to inline-block:
span {
display: inline-block;
}
<del>text<span>&nbsp</span>text</del>
Selector :not
span:not(.space) {
text-decoration: line-through;
}
<span>text</span>
<span class="space">&nbsp</span>
<span>text</span>
JavaScript
Or you can use some simple JavaScript:
const elements = document.querySelectorAll("del");
for (let i = 0; i < elements.length; i++) {
const elem = elements[i];
const words = elem.innerText.split(/\s/);
elem.innerHTML = words.join("<span> </span>")
}
span {
display: inline-block;
}
<del>text text</del>
<del>text text</del>