I’m working on a client project and I would like to do this:
The only thing wrapping the text is a h2. Does anyone know how to do this?
As I recall this has come up before but I don’t think anyone ever found a simple solution.
Haha ok, that’s why I posted it here, because I couldn’t fin a solution. Can you give me the link of the previous post?
I tried searching but it’s such a vague subject…I’ll keep looking.
Would you be able to use spans inside the h2?
It would be better without the spans, because the text is inserted by a user in a input field.
I tried doing something like this…
div class=h2_background /div
h2 Testing 1 2 3 /h2
Forgive me, the code feature just doesn’t seem to work for me.
Then giving the h2_background a background color of #000 and an opacity of .5
Then I tried to absolute position the h2 element to be over it.
Didn’t work so hot, but I’m still learning.
I’m pretty sure no-one ever came up with a solution that didn’t involve extra mark-up/HTML & or JS.
How about this: http://codepen.io/andyunleashed/pen/ArHGv
Using JQuery – found a neat plugin by Jeffrey Way (https://github.com/JeffreyWay/jquery.styleWords)
Then used another bit I found on stackoverflow to style the last word.
Doesn’t change anything the user puts in but manipulates the outputted HTML.
Why can’t you just use something like that, without JS?:
@nosenation – Because he needs there to be a break in the middle. If you just add in a usual br (which he can’t do) it just extends the background without a gap between the lines.
Ok, my fault. Didn’t saw line break :).
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".