title: Show ellipsis on right side and align text to right
body: <p>I put  <code>direction:rtl;</code>  to show in reverse order, but I want to truncate extra text at right side, but not left side.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>   .file-upload-status {
      border: 1px solid #ccc;
      white-space: nowrap;
      overflow: hidden;
      direction: rtl;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="file-upload-status" style="width:200px"&gt;
  &lt;span&gt;*&lt;/span&gt;
     &lt;span&gt;&lt;/span&gt; C:\fakepath\996571_1398802860346752_2094565473_n.jpg&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can someone help me on this?</p>