I Need an Overflow to Truncate from the Left, with Ellipses

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

Try to use this trick:

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

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

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>

How to truncate text via CSS at the beginning of a sentence, not the end?

You could add direction: rtl; :

span {
  margin-left: 20px;
  overflow: hidden;
  max-width: 50ch;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  font-style: italic;
  background: var(--color-light-gray);
  padding: 3px 20px;
  border-radius: 8px;
  direction: rtl;
}

<span>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest.pdf</span>

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

I need my column of text to be left-aligned and truncated to the left

~~... while waiting for an update with your own code :~~

direction can be used twice with unicode-bidi. Wrap your text in an inline element and do the swap:

exemple you can inspire yourself from:

p {
  white-space: nowrap;
  text-overflow: ellipsis; 
  direction: rtl;
  overflow: hidden; 
  text-align:left;
}
span {
  direction: ltr;
  padding: 0 1em;
  unicode-bidi: bidi-override;/* punctuation comes back where suposed to be */
}

<p><span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</span></p>

<p><span>Pellentesque habitant.</span></p>

Two blocks of text side by side, truncate and add ellipsis to one block if necessary

If it is possible to re-arrange the order of label and text then the following CSS rules should do the trick:

<div class="container">
    <span class="label">label</span>
    <span class="text">some very long text</span>
</div>

.container {
    /* nothing */
}
.label {
    float: right;
}
.text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Demo here

How to do text-overflow: ellipsis in reverse?

Change the direction if you want the ellipsis.

.box {  overflow: hidden;  white-space: nowrap;  width: 120px;  text-overflow: ellipsis}

<div dir="rtl" class="box">  StartOfLineMiddleOfLineEndOfLine</div>

How to truncate long text with ellipsis but always show icon after ellipsis

Flexbox can solve this, we just have to expend the ellipsis to the .description div and make a few minor tweaks.

* {  box-sizing: border-box;}.parent {  width: 80%;  margin: auto;  display: flex;  justify-content: space-between;  align-items: center;  margin-bottom: 1em;  padding: .5em;  border: 1px solid grey;}.description {  display: flex;  align-items: center;  white-space: nowrap;  overflow: hidden;}.text {  flex: 1;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}.icon {  flex: 0 0 auto;  background-color: rebeccapurple;  color: white;  padding: .5em;  margin: 0 .25em;}.button {  flex: 0 0 auto;  background-color: #ccc;  padding: .5em;}

<div class="parent">  <div class="description">    <span class="text">Lorem sit amet, consectetur adipisicing elit doloremque earum in, voluptas dolorum sit ab modi facere tempora est, sequi molestiae! Commodi vitae sapiente ipsum, nisi facilis impedit aut? Repellendus!</span>    <span class="icon">I</span>    <span class="icon">I</span>    <span class="icon">I</span>    <span class="icon">I</span>  </div>  <div class="button">    Button  </div></div>
<div class="parent">  <div class="description">    <span class="text">Lorem sit amet</span>    <span class="icon">I</span>    <span class="icon">I</span>  </div>  <div class="button">    Button  </div></div>

I Need an Overflow to Truncate from the Left, with Ellipses