Thursday, August 15, 2013

How to Truncate String with Ellipsis (CSS)

Here full code of how to truncate strings using CSS, so the text must be in a single straight line that overflows a box where that overflow is hidden.

CSS Code:

.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

HTML Code:
<div class="truncate">MAXOFWEB MAXOFWEB MAXOFWEB MAXOFWEB MAXOFWEB MAXOFWEB MAXOFWEB</div>

Result:

MAXOFWEB MAXOFWEB MAX...
Disqus Comments