Text-Overflow Ellipsis on Left Side

Text-overflow ellipsis on left side

I finally had to crack and do something in JavaScript. I was hoping that someone would come up with a hail-mary CSS solution but people seem to just be up-voting the answer that should be correct if it weren't for the Chrome bugs. j08691 can have the bounty for his work.

<html>
    <head>
        <style>
            #container {
                width: 200px;
                border: 1px solid blue;
            }

            #container div {
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
            }
        </style>
        <script>
            function trimRows() {

                var rows = document.getElementById('container').childNodes;
                for (var i=0, row; row = rows[i]; i++) {
                    if (row.scrollWidth > row.offsetWidth) {
                        var textNode = row.firstChild;
                        var value = '...' + textNode.nodeValue;
                        do {
                            value = '...' + value.substr(4);
                            textNode.nodeValue = value;

                        } while (row.scrollWidth > row.offsetWidth);
                    }
                }
            }
        </script>
    </head>
    <body onload='trimRows();'>
    <div id="container" >
        <div>first > second > third</div>
        <div>second > third > fourth > fifth > sixth</div>
        <div>fifth > sixth > seventh > eighth > ninth</div>
    </div>
    </body>

</html>

Fiddle

Truncate String with CSS Ellipsis in the Left Side

.truncate_class {  overflow: hidden;  width: 60px;  direction: rtl;  margin-left: 15px;  white-space: nowrap;}
.truncate_class:after {  position: absolute;  left: 0px;  content: "...";}

<p class="truncate_class">12154543554534351432123</p>

Text overflow with ellipsis on the left

You can set the direction of text from right to left using css direction property direction: rtl:

.l {  text-align: left;  direction: rtl;}.r {  text-align: right;}p {  width: 150px;  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;  border: solid 1px green;}

<p class="l">111222333444555666777888999</p><p class="r">111222333444555666777888999</p>

I need an overflow to truncate from the left, with ellipses

Try to use this trick:

HTML

<p class="ellipsis">ert3452654546</p>

CSS

.ellipsis {
    overflow: hidden;
    width: 60px;
    direction: rtl; 
    margin-left: 15px;
    white-space: nowrap;
}

.ellipsis:after {
    position: absolute;
    left: 0px;
    content: "...";
}

FIDDLE

Strange special characters issue in left side ellipsis

The reason is that you have set writing direction to right-to-left. Latin letters are still rendered left to right due to their inherent (strong) directionality, and punctuation between them does not affect this. But if you start a string with “/”, it is treated as having right-to-left directionality. Being the first character, it is thus placed rightmost.

One way of fixing this is to precede it with the U+200E LEFT-TO-RIGHT MARK character, which you can represent in HTML using ‎.

    .ellipsis:after {        content:"..........................";        background-color: white;        color: transparent;        position: relative;        z-index: 2;    }    .ellipsis {        direction: rtl;        display: inline-block;        width: 200px;        white-space: nowrap;        overflow: hidden;        position: relative;        border: 1px solid black;        z-index: 3;    }    .ellipsis:before {        content:"...";        background-color: white;        position: absolute;        left: 0;        z-index: 1;    }

<p>Problem:</p>
<span class="ellipsis">/C:\Program Files\Java\jre7\bin\new_plugin\npdeployjava1.dll</span>
<p>Solved using left-to-right mark:</p>
<span class="ellipsis">‎/C:\Program Files\Java\jre7\bin\new_plugin\npdeployjava1.dll</span>

Show ellipsis on right side and align text to right

removing direction: rtl and adding below solves my problem

.file-upload-status {
   border: 1px solid #ccc;
   white-space: nowrap;
   overflow: hidden; 
   display : flex; 
   flex-direction : row-reverse; 
   align-items: flex-start;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

}

Can I put Ellipsis on the Left and Periods on the Right?

One way is to put the content of the div in a span with dir="ltr", forcing the content to be rendered in the standard order while still cutting off to the left as desired.

div {  width: 300px;  white-space: nowrap;  border: solid 1px #000;  margin-bottom: 10px;  direction: rtl;  text-overflow: ellipsis;  overflow: hidden;}

<div>  <span dir="ltr">This is a sentence that is too long to fit in the space provided.  The ellipsis is where I want it.</span></div>
<div>  <span dir="ltr">Where is the question mark?</span></div>

Left Ellipsis Overflow on IE/Edge

Here's something to try that uses JS. I don't have IE to test on, but hopefully it'll give you some logic to go on either way. The basic idea is to test the widths of the content and its container, while removing one character at a time to see when it fits. (I used jQuery just because it's faster for me, but you certainly don't need it.)

$('.left-ellipsis').each(function() { var $span = $(this).find('span'); if ($span.width() > $(this).width()) {  $span.addClass('ellipsis');  while ($span.width() > $(this).width()) {   $span.text($span.text().substr(1));  } }});

.left-ellipsis {  overflow: hidden;}
.left-ellipsis span { white-space:nowrap;}
.left-ellipsis span.ellipsis { float:right;}
.left-ellipsis span.ellipsis:before { content:"...";}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><strong>With overflowing content</strong><br><i>Expected to see <strong>1 0002 0003 0004 0005 end</strong></i><div class="left-ellipsis" style="border: 1px solid #666; width: 200px; padding:5px;"> <span>123 456 789 0001 0002 0003 0004 0005 end</span></div><br><br><strong>Without overflowing content</strong><br><i>Expected to see <strong>0002 0003 0004 0005 end</strong> without ...</i><div class="left-ellipsis" style="border: 1px solid #666; width: 200px; padding: 5px;"> <span>0002 0003 0004 0005 end</span></div>

Several browser compatibility problems with text-overflow ellipsis on left-hand side using RTL

There are JS/Jquery based solutions to your problem. The one caveat is they are more expensive. If you are not making a bunch of changes on your page then the following solutions should work just fine.

Dotdotdot:
http://dotdotdot.frebsite.nl/

ThreeDots
http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/

Edit: Just to be clear, I'm seeing the same problems that you have mentioned.

Text-Overflow Ellipsis on Left Side