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

April 2024
M T W T F S S
1234567
891011121314
15161718192021
22232425262728
2930