Html 文本溢出，左侧有省略号

考虑以下html/css片段：

.l{text align:left；}
.r{文本对齐：右；}
p{
宽度：150px；
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
边框：实心1px绿色；
}

11122233344455666777888999
11122233344455666777888999

要获得这种效果，您必须使用一些技巧。请参见以下示例：

p{
边框：1px实心#000；
宽度：150px；
}
.省略号{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
.反向省略号{
文本溢出：剪辑；
位置：相对位置；
背景色：白色；
}
.反向省略号：before{
内容：'\02026'；
位置：绝对位置；
z指数：1；
左：-1米；
背景色：继承；
左：1米；
左边距：0.5em；
}
.反向省略号范围{
最小宽度：100%；
位置：相对位置；
显示：内联块；
浮动：对；
溢出：可见；
背景色：继承；
文本缩进：0.5em；
}
.反向省略号span:before{
内容：''；
位置：绝对位置；
显示：内联块；
宽度：1米；
高度：1米；
背景色：继承；
z指数：200；
左：-.5em；
}

111222333444555666777888999

11122233344455666777888999

您可以使用css方向属性设置文本从右到左的方向

方向：rtl

：

.l{
文本对齐：左对齐；
方向：rtl；
}
r{
文本对齐：右对齐；
}
p{
宽度：150px；
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
边框：实心1px绿色；
}

11122233344455666777888999
1112223344555666777888999

IE11显示的是

…111222333

，而不是

…4555666

，不幸的是，这不是通用解决方案

0.example.com

在Firefox和Chrome中呈现为

example.com.0

。找到了一个解决方案：用

启动内容&lrm

强制内容本身从左到右呈现为常规内容。