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.
No description
6 Replies
CodeNascher
CodeNascher9mo 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.
capt_uhu
capt_uhu9mo 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
Grant
Grant9mo ago
Thanks for the suggestions both. I’ll give them a try
Grant
Grant9mo 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?
No description
Grant
Grant9mo ago
Actually, playing around, adding white-space: nowrap; to the .strike sorts this out. Don't really understand why though?
CodeNascher
CodeNascher9mo ago
the markup only needs the h1 with text in it. no other elements <h1 class="txt-strike">Just another boring old agency.</h1>
Want results from more Discord servers?
Add your server