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.

score 1 · Accepted Answer · answered Jul 23 '10 at 21:56

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.

answered Jul 23 '10 at 21:56

Pat

25,237
6
71
68

score 1 · Answer 2 · answered Jul 23 '10 at 21:58

1

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

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

answered Jul 23 '10 at 21:58

Ian Wetherbee

6,009
1
29
30

Just as a note: float:right as in Pat's example worked for my specific case better – Bostone Jul 23 '10 at 22:52

score 1 · Answer 3 · answered Jul 23 '10 at 22:00

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)

score 0 · Answer 4 · answered Jul 23 '10 at 21:56

0

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

answered Jul 23 '10 at 21:56

bimbom22

4,510
2
31
46

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

4 Answers4