CSS - 将div内的长连续文本向右移动？

Question

我有一个长文本不适合它占据的div。 div类如下：

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

当然，我只能看到部分文本。问题是它显示前N个字符，我想显示最后N个字符。我如何用CSS实现它？ Text-align在这里没有帮助。

Answer 1

如果您可以将文字包装到其他元素中，可以按照this fiddle中的说明使其工作。我向右移动了一个嵌套的<span>。

Answer 2

你将不得不使用JavaScript来滚动DIV一路向右，试着：

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

你可以只用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> 

（在Firefox中测试.YMMV）