文字右对齐。向左排表。超过容器时省略

在这种情况下,就有一个非常陌生的属性派上了用场。就是 :

direction: rtl

这个属性规定文本的方向 / 书写方向是从右到左的。


a {

display:inline-block; 

width:100%;

white-space:nowrap;

text-overflow:ellipsis; 

-o-text-overflow:ellipsis; 

overflow: hidden;

direction: rtl;

}

然后我们再加上超过容器省略文字:


a {

display:inline-block; 

width:100%;

white-space:nowrap;

text-overflow:ellipsis; 

-o-text-overflow:ellipsis; 

overflow: hidden;

-webkit-line-clamp: 1; //在第几行后开始省略

direction: rtl;

}

最终效果便如下图所示。

文章来源:http://wsovo.lofter.com/post/27f1a4_8b601df