我可以把省略号放在左边，把句号放在右边吗？答案

【问题标题】：Can I put Ellipsis on the Left and Periods on the Right?我可以把省略号放在左边，把句号放在右边吗？
【发布时间】：2018-01-30 20:29:01
【问题描述】：

将省略号 (...) 向左移动很容易完成：

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

但是如果结尾有标点符号，比如句号 (.) 或问号，该怎么办？它也显示在左侧。我还是想看看右边的句号。有没有简单的方法解决这个问题？

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

【问题讨论】：

<span dir="ltr">Where is the question mark?</span>
感谢李斯特先生，这正是我所需要的。如果您将其发布为答案，我会将其标记为答案。

标签： css

【解决方案1】：

一种方法是将 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>

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

【讨论】：

【解决方案2】：

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，标点确实是这样的。

【讨论】：