This site runs best with JavaScript enabled.

Wrapping ahref links in CSS

Jesse

November 20, 2020


While I testing out the responsive behavior of a site I was building, I noticed that on very narrow viewports normal text was wrapping as expected (see the address on the left-hand side in the image below), but ahref links were not wrapping (see the email and telephone number on the right-hand side in the image below).

wrapping failing

Searching on Google led me to the suggestion of using the word-wrap CSS property, like so:

word-wrap: break-word;

This didn't work for me (on Brave/Chrome) however. But the following did 1:

word-break: break-all;

Here's what the end result looks like:

end result

Share article



Jesse © 2020