Hi,
I'm working on a client project and I would like to do this: https://www.dropbox.com/s/3drqs9f3r566nao/wb.jpg
The only thing wrapping the text is a h2. Does anyone know how to do this?
Thanks!
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?
http://codepen.io/andyunleashed/pen/ArHGv
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_wrapper div class=h2_background /div h2 Testing 1 2 3 /h2 /div
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.
Thanks guys!
Why can't you just use something like that, without JS?:
h2 { display: inline-block; color: white; text-align: center; text-transform: uppercase; background: rgba(0,0,0,0.7); padding: 5px; }
@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 :).
Hi,
I'm working on a client project and I would like to do this: https://www.dropbox.com/s/3drqs9f3r566nao/wb.jpg
The only thing wrapping the text is a h2. Does anyone know how to do this?
Thanks!
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?
http://codepen.io/andyunleashed/pen/ArHGv
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...
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.
Thanks guys!
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 :).