title: Text-overflow ellipsis on left side
body: <p>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 <code>text-overflow: ellipsis</code>. 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:</p>
  
  <pre><code>----------------------------
  |first &gt; second &gt; third    |
  |...second &gt; third &gt; fourth|
  |...fifth &gt; sixth &gt; seventh|
  ----------------------------
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>EDIT: <em>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.</em> </p>