...direction: rtl

When you output a lot of text information in HTML pages you may need to truncate some words. A smart thing to do is to use CSS3 text-overflow property. For example: to get text truncated like "Here is a long te..." you would code:

HTML

<span class="truncate">Here is a long text information.</span>

CSS

SPAN.truncate {
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
}

Sometimes you may need to cut text from left side to get something like "...a long text information". This is easy to do using the "direction: rtl" CSS property. Add another class which will define alternate truncation side:

CSS

SPAN.truncate.left {
    direction: rtl;
}

Usage for the above CSS class:

<span class="truncate left">Here is a long text information.</span>