如何使用CSS2剪辑文本和右对齐（NOT float）元素？

Question

CSS3中white-space: nowrap;，overflow: hidden;和text-overflow: ellipsis;的{​​p> The awesome combination在剪切块元素的文本方面做得很好。

我想用CSS2（兼容现代浏览器，IE7和更新版本），并将文本（NOT浮动）对齐到右边。有可能吗？

Here's a jsFiddle with an example code snippet。请测试你的答案。谢谢！

Answer 1

无法在IE中对此进行测试，但是将包含文本的元素显示为inline-block，然后在父作品上设置text-align: right。

http://jsfiddle.net/N3WYE/1/

编辑：#breadcrumbs上的display: inline也应该有效，但你显然会失去block效果。

Answer 2

是什么让你认为你不能只设置text-align:right？对我来说很好。

所有现代浏览器（IE7 +）都支持

white-space和text-overflow。因此，在您的示例中，如果右对齐文本超出父级的宽度，则会进行椭圆化。

这是你的小提琴（只需拉动窗口使其更窄，你就会看到它工作正常）：http://jsfiddle.net/rgthree/N3WYE/2/