carlos-sanchez
11/14/2013 - 12:40 AM

Break long URLs or truncate text. Now we will see two snippets about long strings truncation: one preventing the text to break out of their

Break long URLs or truncate text. Now we will see two snippets about long strings truncation: one preventing the text to break out of their container (such as an URL) by forcing the break. And one to make an ellipsis in case the string is too long for its container.

The first snippet (.break) works in Internet Explorer 8+, Firefox, Safari and Chrome. Sadly, it doesn’t work in Opera as far as I can tell. :(

The second snippet (.ellipsis) works in Internet Explorer 8+, Safari, Opera and Chrome. Sadly, it doesn’t work in Firefox. However, a clever guy found a way to do it with some XML and the -moz-binding property.

Note: set the width of the .ellipsis element to suit your needs.

.break {
    -ms-word-break: break-all;
    word-break: break-all;
 
    word-break: break-word;
 
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}
 
.ellipsis {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis; /* Required for IE8 */
    -o-text-overflow: ellipsis; /* Required for Opera */
    text-overflow: ellipsis;
}