Question

5

Text-overflow ellipsis on left side

rated 0 times [ 10] [ 5] / answers: 1 / hits: 44337 / 12 Years ago, tue, march 20, 2012, 12:00:00

I have a list of paths (for lack of a better word, maybe bread crumb trails describes them better). Some of the values are too long to display in their parent so I'm using text-overflow: ellipsis. The problem is that the important information is on the right, so I'd like the ellipsis to appear on the left. Something like this this ascii art:

----------------------------

|first > second > third    |

|...second > third > fourth|

|...fifth > sixth > seventh|

----------------------------

Notice that the first row is short enough so it remains left aligned, but the other two are too long so the ellipsis appears on the left hand side.

I'd prefer a CSS only solution, but JS is fine if it can't be avoided. It's ok if the solution only works in Firefox and Chrome.

EDIT: At this point I'm looking for a work around for the bugs in Chrome that prevent it from rendering properly when a document is mixed RTL and LTR. That was all I really needed from the outset, I just didn't realize it.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ellisw

Add To Favorites

Follow

Total Points: 625

Total Questions: 92

Total Answers: 88

Location: Kazakhstan

Member since Mon, Sep 26, 2022

2 Years ago

ellisw questions

1 How to check if event target is contained within an element?

Mon, Aug 23, 21, 00:00, 3 Years ago

1 Jest - one function mocks file for multiple test files

Fri, Nov 20, 20, 00:00, 4 Years ago

1 Electron Forge with react?

Sat, Jun 20, 20, 00:00, 4 Years ago

1 material-ui makeStyles: how to style by tag name?

Tue, Apr 21, 20, 00:00, 4 Years ago

1 Using async-await with node-fetch does not return the response to the calling method

Sun, Mar 22, 20, 00:00, 4 Years ago

View All

answered 12 Years ago eden · Accepted Answer

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