CSS - shift long continuous text inside the div to the right?

Question

I have a long text that would not fit within the div it occupies. The div class is as follows:

.mydiv {
    overflow:hidden;
    padding:3px 3px 3px 5px;
    white-space:nowrap;
}

Of course I can only see portion of text. The problem is that it shows first N characters and I want to show last N chars. How do I achieve it with CSS? Text-align doesn't help here.

Answer 1

If you're able to wrap your text in another element, you can make it work as shown in this fiddle. I've floated a nested <span> to the right.

Answer 2

You'll have to use javascript to scroll the div all the way to the right, try:

var obj = document.getElementById("div-id");
obj.scrollLeft = obj.scrollWidth - obj.clientWidth

Answer 3

<div class="wrap">
    <div class="window">Lots of text</div>
</div>

.wrap { overflow: hidden; position: relative; }
.window { position: absolute; right: 0px; }

Answer 4

You can do it with just CSS:

http://jsbin.com/ususu

  <div style="width: 150px; border: 1px solid red; overflow: hidden; position: relative; height: 2em;">
      <div style="position: absolute; right: 0px; padding: .5em;white-space:nowrap;">
  aaaaaaaaaaaabbbbbbbbbcccccccccccccccccddddddddddddddddddddeeeeeeeeeeeeeeeeeeeeffffffffffffffffffffgggggggggggggggggggghhhhhhhhhhhhhhhhiiiiiiiiiiiii
     </div>
  </div>

(tested in Firefox. YMMV)