CSS Ellipsis Beginning of String

By  on  
I was incredibly happy when CSS text-overflow: ellipsis (married with fixed width and overflow: hidden was introduced to the CSS spec and browsers; the feature allowed us to stop trying to marry JavaScript width calculation with string width calculation and truncation.  CSS ellipsis was also very friendly to accessibility. The CSS text-overflow: ellipsis feature is great but is essentially meant to ellipsize strings only at the end; what if we want to ellipsize the beginning of a screen?  The use case is fairly reasonable: think displaying a file path -- many times the directory for a set of files is the same, in which case you'd want to display the end of the string, not the beginning. Let me show you a trick for ellipsis at the begging of the string!

The CSS

Showing an ellipsis at the front of a string is mostly the same as ellipsis at the end, only with one simple trick:
.ellipsize-left {
    /* Standard CSS ellipsis */
    white-space: nowrap;                   
    overflow: hidden;
    text-overflow: ellipsis;  
    width: 200px;
    
    /* Beginning of string */
    direction: rtl;
    text-align: left;
}
To add an ellipsis at the beginning of a string, use RTL and and text-align to clip the beginning of the string! Playing RTL off of text-align is a genius way to get the desired effect of CSS ellipsis at the beginning of an element or string.  It would be great for the CSS spec to implement a more robust ellipsis system but, for now, I worship amazing CSS tricks like this!

Recent Features

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

Incredible Demos

  • By
    Facebook Sliders With Mootools and CSS

    One of the great parts of being a developer that uses Facebook is that I can get some great ideas for progressive website enhancement. Facebook incorporates many advanced JavaScript and AJAX features: photo loads by left and right arrow, dropdown menus, modal windows, and...

  • By
    Face Detection with jQuery

    I've always been intrigued by recognition software because I cannot imagine the logic that goes into all of the algorithms. Whether it's voice, face, or other types of detection, people look and sound so different, pictures are shot differently, and from different angles, I...

Discussion

  1. The CSS spec seems to recommend against using the direction property on web pages:

    https://drafts.csswg.org/css-writing-modes-3/#direction

  2. yak613

    http://jsfiddle.net/yak613/fhr2s10c/

    This seems kind of strange. Where is the extra slash coming from?

  3. Boon

    This trick seems to be broken for Safari which still truncates from the back then appends the ellipsis to the front.
    Chrome/FF: 12345 => …345
    Safari: 12345 => …123

  4. Jon Wallsten

    For anyone having issues with symbols, like the plus sign in international phone numbers, add this:
    unicode-bidi: plaintext;

  5. If anyone dealing with multiline strings to truncate i recommend using the cuttr.js (https://github.com/d-e-v-s-k/cuttr-js) library ;)

  6. Dan

    Just in case anyone else runs into this… I had an issue where if the text contained punctuation, adding

    direction: rtl

    moved the punctuation marks to the beginning of the text. I solved this by appending the unicode ‎ character to the end of the string with an :after

    .ellipsize-left {
        /* Standard CSS ellipsis */
        white-space: nowrap;                   
        overflow: hidden;
        text-overflow: ellipsis;  
        width: 200px;
        
        /* Beginning of string */
        direction: rtl;
        text-align: left;
    }
    .ellipsize-left:after {
        content: '\200E'
    }
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!