Thursday, September 6, 2012

...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:

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

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:

SPAN.truncate.left {
    direction: rtl;

Usage for the above CSS class:
<span class="truncate left">Here is a long text information.</span>

No comments:

Post a Comment

Popular Posts