position absolute on heading
Hey, i have an icon to the top right of my heading placed using position absolute in this example. When the viewport shrinks, this can leave large gaps between the text and icon at some points due to the text wrapping (like in the image) and overflow too. What methods would ya'll use to make this responsive and flow smoothly with the text?
https://codepen.io/deerCabin/pen/zYVqgVY
Thanks in advance.
7 Replies
This is my solution: https://codepen.io/chooking/pen/ExByYpZ
I reduced the height of the icon because I made it stick to the last word, and that looks bad when it overlaps text on the line above. The alternative would be to increase the line height of the h1.
Ah I see, thatβs pretty neat, thanks for the example. did you add
white-space: nowrap; so the icon doesnβt wrap to a new line?I did that to prevent the icon from going on the next line alone. It is forced to stay with the last word.
Ah that makes sense. Is there a difference between that and
text-wrap: nowrap;?The white-space is a shorthand that can include white-space-collapse with text-wrap. In this specific case, you can also use text-wrap, because no white-space-collapse was specified. The nowrap is specifically a text-wrap setting that is being declared via white-space instead.
Oh I didnβt know that, thank you for the help