文本溢出，左边是省略号

问题描述

请考虑下面的html / css代码片段：

.l {text-align：left; } .r {text-align：right; } p {width：150px;溢出：隐藏;白色空间：nowrap;文本溢出：省略号;边框：实心1px绿色; }

 < p class =l> 111222333444555666777888999< ; / p为H. < p class =r> 111222333444555666777888999< / p>  

p>它显示了两个固定宽度的容器，其中一些文本太长而不适合，溢出设置为显示省略号以显示某些文本被隐藏。第一个容器是左对齐的，第二个是右对齐的。

结果显示省略号在这两个例子的右边。

然而，对于第二个右对齐的，我想实现这一点：

  .. .4555666777888999 
  

而不是

  1112223334445556 ... 
  

这可能吗？

解决方案

您可以使用css direction property 方向从右向左设置文本的方向：rtl ：

  .l {text-align：left;方向：rtl;}。r {text-align：right;} p {width：150px;溢出：隐藏;白色空间：nowrap;文本溢出：省略号; border：solid 1px green;}  

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

参考

Consider this html/css snippet:

.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>

It shows two fixed-width containers with some text too long to fit, with overflow set to show an ellipsis to show that some text is hidden. The first container is left justified, the second is right justified.

The result shows that the ellipsis is on the right for both examples.

However, for the second right justified one, I'd like to achieve this:

...4555666777888999

instead of

1112223334445556...

Is this possible?

解决方案

You can set the direction of text from right to left using css direction property 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>

References

MDN direction

这篇关于文本溢出，左边是省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！