文本溢出,左侧有省略号

Question

考虑一下这个html/css片段:

.l { text-align: left; }
.r { text-align: right; }

p { 
  width: 150px; 
  overflow: hidden; 
  white-space: nowrap; 
  text-overflow: ellipsis;
  border: solid 1px green; 
}

<p class="l">111222333444555666777888999</p> 
<p class="r">111222333444555666777888999</p>

它显示了两个固定宽度的容器,其中一些文本太长而无法容纳,溢出设置为显示省略号以显示某些文本被隐藏.第一个容器左对齐,第二个容器右对齐.

结果显示两个示例的省略号都在右侧.

但是,对于第二个合适的人,我想实现这个目标:

...4555666777888999

代替

1112223334445556...

这可能吗？

Answer 1

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

.l {
  text-align: left;
  direction: rtl;
}
.r {
  text-align: right;
}
p {
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: solid 1px green;
}

<p class="l">111222333444555666777888999</p>
<p class="r">111222333444555666777888999</p>

方向

设置方向CSS属性以匹配文本的方向:rtl用于从右到左(如希伯来语或阿拉伯语)文本和ltr用于其他脚本编写的语言.这通常作为文档的一部分(例如,使用HTML中的dir属性)而不是通过直接使用CSS来完成.

参考

MDN方向