文本溢出，左边是省略号 [英] Text overflow with ellipsis on the left

问题描述

请考虑下面的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>




方向

文本方向：rtl
用于从右至左（如希伯来语或阿拉伯语）文本
和ltr用于其他脚本的语言。这通常是作为
文档的一部分完成的（例如，在HTML中使用dir属性），而不是通过
直接使用CSS。

参考



MDN方向

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>

direction

Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.

References

MDN direction

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