< Back to Coding, HTML

Making long links wrap

This is particularly important for mobile sites so the links don’t break the layout. Here’s the CSS:

a.longLink{
 /* required for windows 8 phone and ie10,11 */
 -ms-word-break: break-all;
 word-break: break-all;
 display:inline-block;

/* Non standard for webkit */

word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

Tested on an iPod Touch 3rd gen, andriod, windows 8 phone, IE 10,11, and Safari, Chrome and Firefox on Mac.

Be Sociable, Share!

Leave a Reply

Your email address will not be published. Required fields are marked *