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

问题描述：

我有一个长文本不适合它占据的div。 div类如下：CSS - 将div内的长连续文本向右移动？

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

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

答

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

宾果！这对我来说非常合适，谢谢Pat – Bostone 2010-07-23 22:51:10

答

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

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

答

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

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

就像一个注释：float：就像在Pat的例子中一样，为我的特定情况工作得更好 – Bostone 2010-07-23 22:52:44

答

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

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

相关推荐