Kevin Powell - Community•11mo ago

Strike line continuing through text regardless of length…

Hello, I am trying to recreate the styled text attached and I am running into problems. I have tried various ways to achieve this, and none quite work… 1. Pseudo Class Works great until the line breaks 2. Text Decoration Line This is pretty close, but I am unable to get the line to over hang the edges of the text. 3. Background Image Whilst this going over each line, the overhang is an issue, plus getting the line in front of the text. Here is the Pen I have been playing with. Would be grateful for some suggestions please. https://codepen.io/grantsmith/pen/qBvzRdL The solution I have currently is that each line has its own text input. This is pretty impractical for the user, plus it falls apart on smaller screens. Ideally I would like one text input and the styling works as above regardless of text length.

Grant Smith

CodePen

Strike Through Text

...

6 Replies

CodeNascher•11mo ago

Here's my approach: https://codepen.io/CodeNascher/pen/poYXRed Tried using clip-path at first, but couldn't get it to work. That's why I resorted to a JS solution to convert each word into <span>s and re-inject them into the original text. Has some problems though, which are listed on the page. There may be more but I couldn't find any other issues after taking a quick look. Maybe someone else can improve it or maybe you are satisfied enough with my approach.

CodeNascher

CodePen

Strike line

...

capt_uhu•11mo ago

for your background example adding padding-right: 1em; and box-decoration-break: clone; should cover the over hang. Not sure if box-decoration-break works with text-decoration though. FYI box-decoration-break still needs -webkit prefix outside of Firefox

GrantOP•11mo ago

Thanks for the suggestions both. I’ll give them a try

GrantOP•11mo ago

@[object Object] Using your great code example, I get the screenshot? The markup looks as such…

<h1 class="txt-strike txt-white hero">
  <span class="strike">JUST
    <span></span>
  </span>
  <span class="strike">ANOTHER
    <span></span>
  </span>
  <span class="strike">BORING
    <span></span>
  </span>
  <span class="strike">OLD
    <span></span>
  </span>
  <span class="strike">AGENCY
    <span></span>
  </span>
</h1>

<h1 class="txt-strike txt-white hero">
  <span class="strike">JUST
    <span></span>
  </span>
  <span class="strike">ANOTHER
    <span></span>
  </span>
  <span class="strike">BORING
    <span></span>
  </span>
  <span class="strike">OLD
    <span></span>
  </span>
  <span class="strike">AGENCY
    <span></span>
  </span>
</h1>

export function strikeStyling() {
  const options = {
    element: '.txt-strike',
    class_name: 'strike',
  };

  (({ element, class_name }) => {
    const elements = document.querySelectorAll(element);

    elements.forEach((string) => {
      if (string.innerText === '') return;

      const words = string.innerText.split(' ');
      const spans = words.map((word) => `<span class="${class_name}">${word}<span></span></span>`).join(' ');

      string.innerText = '';
      string.insertAdjacentHTML('afterbegin', spans);
    });
  })(options);
}

export function strikeStyling() {
  const options = {
    element: '.txt-strike',
    class_name: 'strike',
  };

  (({ element, class_name }) => {
    const elements = document.querySelectorAll(element);

    elements.forEach((string) => {
      if (string.innerText === '') return;

      const words = string.innerText.split(' ');
      const spans = words.map((word) => `<span class="${class_name}">${word}<span></span></span>`).join(' ');

      string.innerText = '';
      string.insertAdjacentHTML('afterbegin', spans);
    });
  })(options);
}

.strike {
  --overhang: calc(1ch / 2);
  --thickness: calc(1ch / 2.5);

  position: relative;

  & > span {
    position: absolute;
    top: 50%;
    height: var(--thickness);
    background-color: colour.$red;
    inset-inline: calc(var(--overhang) * -1);
    translate: 0% -50%;
  }
}

.strike {
  --overhang: calc(1ch / 2);
  --thickness: calc(1ch / 2.5);

  position: relative;

  & > span {
    position: absolute;
    top: 50%;
    height: var(--thickness);
    background-color: colour.$red;
    inset-inline: calc(var(--overhang) * -1);
    translate: 0% -50%;
  }
}

This doesn't happen in your example?

GrantOP•11mo ago

Actually, playing around, adding white-space: nowrap; to the .strike sorts this out. Don't really understand why though?

CodeNascher•11mo ago

the markup only needs the h1 with text in it. no other elements <h1 class="txt-strike">Just another boring old agency.</h1>

Gaming

Programming

Strike line continuing through text regardless of length…