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

Question

I doubt this is possible, but wanted to ask just in case... Also, I did find this Q/A, but it's not the right solution for my situation (or I'm doing it wrong)...

I have a column of single lines of text (e.g. each div inside the column is white-space: no-wrap), and this column is 50% of the page's width... I can easily add overflow: hidden and text-decoration: ellipsis to get each line of text to truncate on the right-hand side, but I've been asked to make it truncate on the left (to cut-off the start of each line)...

The problem with solutions like using direction: rtl is that it causes all the lines that don't truncate to be right-aligned, and I need those to still be left-aligned... Is that possible?

Edit, to add example code:

{
  width: 400px;
  border: 1px solid grey;
}

#column>div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div id="column">
  <div>I'm a very long string of text and I should be truncted on my left-hand side (at the start) and not here at the right-hand side</div>
  <div>I'm a shorter string -- I should be left aligned</div>
</div>

If you add direction: rtl to #column, the first line is correctly truncated at the start, but the second line is incorrectly right-aligned...

Answer 1

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

see :https://css-tricks.com/almanac/properties/u/unicode-bidi/ for more infos