Truncate String with Ellipsis

Overflow with text is always a big issue in a website, especially in a programmatic environment. Use Ellipsis to truncate string.

We can provide a solution by adding an CSS property overflow: hidden setting to the span, but you can see that the text looked unnaturally cut off.

The way to make text overflow elegant is with ellipses.

The CSS behind creating ellipses is very simple, combining width, wrapping, overflow, and text-overflow:

span{
display:inline-block;
width:200px;
white-space: nowrap;
overflow:hidden ;
text-overflow: ellipsis;
}

Here is total example:

HTML:

<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus pretium metus vitae aliquet. Sed facilisis enim nibh, eget maximus erat dignissim sit amet. In hac habitasse platea dictumst. In nec nunc eu diam pulvinar lacinia nec et arcu. Sed ut enim nunc. Nam lobortis nibh tincidunt nunc scelerisque venenatis</span>

CSS:

span{
display:inline-block;
width:200px;
white-space: nowrap;
overflow:hidden ;
text-overflow: ellipsis;
}

Result will be:

Lorem ipsum dolor sit amet,...

But Firefox doesn’t currently support text-overflow:ellipsis property. There’s one another solution for Firefox provided by Dojo Toolkit: dojox.html.ellipsis.

This resource uses an iFrame shim to create ellipsis.

dojo.require("dojox.html.ellipsis");

After requiring the JavaScript resource, place a dojoxEllipsis node within the page as below:

<span class="dojoxEllpsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus pretium metus vitae aliquet. Sed facilisis enim nibh, eget maximus erat dignissim sit amet. In hac habitasse platea dictumst. In nec nunc eu diam pulvinar lacinia nec et arcu. Sed ut enim nunc. Nam lobortis nibh tincidunt nunc scelerisque venenatis</span>