Maybe my question is too simple :) Struggling to exclude '&snbsp's and spaces from being visualized with strike thought

 del {
      text-decoration: line-through;
      background-color: var(--color-warn-light);
    }

so in <del>&nbsp</del> is visualized like a minus '-'.

Is there a possibility by css (?) to exclude some characters from being decorated?

Update: found text-decoration-skip: spaces by its is not supported by most browsers :(

CodePudding user response：

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 >&nbsp</span>
<span>text</span>

CodePudding user response：

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>