Can i exclude spaces from text decoration?

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 :(

Please consider accepting an answer if it solved your problem or helped in finding the solution. — H3AR7B3A7, Jun 27 '22 at 00:15

H3AR7B3A7 · Answer 1 · 2022-06-20T22:45:42.940

1

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>&nbsp;</span>")
}

span {
  display: inline-block;
}

<del>text&nbsp;text</del>
<del>text text</del>

edited Jun 20 '22 at 22:45

answered Jun 20 '22 at 21:48

H3AR7B3A7

4,366
2
14
37

Very clean JS! Nicely done. – Aaron Meese Jun 21 '22 at 00:01
This seems to replace all the 'ordinary' spaces with non-breaking spaces which could cause problems in some circumstances. – A Haworth Jun 21 '22 at 04:46

score 1 · Answer 2 · answered Jun 20 '22 at 21:52

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 += "&nbsp;";
  });
}

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>

Nice, I hope you don't mind this inspired me to use some JS in combination with my solution. — H3AR7B3A7, Jun 20 '22 at 22:48
@H3AR7B3A7 of course not! We're all on the same team here, it isn't a competition :) nice answer! — Aaron Meese, Jun 21 '22 at 00:01

Can i exclude spaces from text decoration?

2 Answers2

Inline Block

Selector :not

JavaScript