Making long links wrap

Posted on

in

,

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.

Leave a Reply

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

About me

Mark Wong is a front end developer with 10+ years experience. Most of his knowledge of HTML5, CSS and Js is self taught.

Calendar

February 2025
M T W T F S S
 12
3456789
10111213141516
17181920212223
2425262728