Text is breaking using absolute positioning
I have a small challenge that I haven’t found any solution on Stack Overflow.
That’s what I got:
And that’s how I’d like it:
To produce this title effect I’m using absolute position. I don’t even know the width and the height from my title. So, big text breaks when using this solution.
See an example on Codepen to make life easier: http://codepen.io/caio/pen/ZYoyPb
The easiest solution would be to add
white-space: nowrap. In doing so, the
h1 text will not break to a new line. (updated example)
In addition, you could also add
width: 100% so that the text forms ellipsis and never breaks to a new line. (example here)