css - 我可以把省略号放在左边，句点放在右边吗？

Question

将省略号 (...) 向左移动很容易:

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

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

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

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

然而，这不是唯一可能的解决方案。正如@reallenramos 的回答所示，您还可以在内容末尾插入 ‎；那也行。
后一种方法的另一个好处是您不需要更改标记；您可以完全在 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>

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