Question

使用以下方法轻松地将省略号（...）移动到左侧：

.overflow-box{
    direction: rtl;
    text-overflow: ellipsis;
    overflow: hidden;
}

但如果最后有标点符号，如句点（。）或问号，该怎么办？它也显示在左侧。我仍然希望看到右边的时期。有一个简单的方法吗？

演示：https://jsfiddle.net/JoelMac/Lx4L15o3/5/

Answer 1

tl; dr：将&lrm;添加到文本的末尾，就像这样

<div>
Where is the question mark?&lrm;
</div>

看起来像是Why is a trailing punctuation mark rendered at the start with direction:rtl?

的副本

根据this，标点符号的行为确实如此。

Answer 2

一种方法是将div的内容放在dir="ltr"的范围内，强制内容以标准顺序呈现，同时仍然根据需要切换到左侧。

div {
  width: 300px;
  white-space: nowrap;
  border: solid 1px #000;
  margin-bottom: 10px;
  direction: rtl;
  text-overflow: ellipsis;
  overflow: hidden;
}

<div>
  <span dir="ltr">This is a sentence that is too long to fit in the space provided.
  The ellipsis is where I want it.</span>
</div>

<div>
  <span dir="ltr">Where is the question mark?</span>
</div>

但是，这不是唯一可行的解决方案。正如@ reiallenramos的答案所示，您还可以在内容的末尾插入&lrm;;这也会奏效。
后一种方法的另一个好处是您不需要更改标记;你可以完全用CSS完成，如下所示：

div {
  width: 300px;
  white-space: nowrap;
  border: solid 1px #000;
  margin-bottom: 10px;
  direction: rtl;
  text-overflow: ellipsis;
  overflow: hidden;
}

div::after {
  content:'\200E';
}

<div>
  This is a sentence that is too long to fit in the space provided.
  The ellipsis is where I want it.
</div>

<div>
  Where is the question mark?
</div>

这将是我首选的方法，但您可以选择任何您想要的方式。

我可以将Ellipsis放在左边和期间吗？

2 个答案: