Overflow to left instead of right

I had the same problem and solved it using two divs. The outer div does the clipping on the left and the inner div does the floating to the right.

.outer-div {
  width:70%;
  margin-left:auto;
  margin-right:auto;
  text-align:right;
  overflow:hidden;
  white-space: nowrap;
}

.inner-div {
  float:right;
}

:

<div class="outer-div">
  <div class="inner-div">     
    <p>A very long line that should be trimmed on the left</p>
  </div>
</div>

You should be able to put any content inside the inner div and overflow it on the left.

This worked like a charm:

<div style="direction: rtl;">
  <span style="white-space: nowrap; direction: ltr; display: inline-block;">your short or long comment<span>
</div>

Have you tried using the following:

direction: rtl;

For more information see
http://www.w3schools.com/cssref/pr_text_direction.asp