css - 如何使用 CSS2 剪辑文本和右对齐（非浮动）元素？

Question

和in CSS3white-space: nowrap;的绝妙组合在剪切块元素的文本方面做得很好。overflow: hidden;text-overflow: ellipsis;

我想用 CSS2（与现代浏览器、IE7 和更新的浏览器兼容）来做到这一点，并将文本（不浮动）向右对齐。可能吗？

这是一个带有示例代码片段的 jsFiddle。请在上面测试你的答案。谢谢！

Answer 1

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

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

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

Answer 2

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

white-space并且text-overflow在所有现代浏览器 (IE7+) 中都受支持。因此，在您的示例中，如果右对齐的文本超出父级的宽度，它将变成椭圆形。

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