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.
6 Replies
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.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 FirefoxThanks for the suggestions both. I’ll give them a try
@[object Object] Using your great code example, I get the screenshot?
The markup looks as such…
This doesn't happen in your example?
Actually, playing around, adding
white-space: nowrap;
to the .strike
sorts this out. Don't really understand why though?the markup only needs the h1 with text in it.
no other elements
<h1 class="txt-strike">Just another boring old agency.</h1>