如何进行文本溢出：反向省略号？

Question

这个CSS:

text-overflow: ellipsis;

在溢出时将"StartOfLineMiddleOfLineEndOfLine"更改为"StartOfLineMiddleOfLineEndOf..."。我如何反过来，使其成为 "...OfLineMiddleOfLineEndOfLine"？有什么解决方法吗？我可以接受 "fLineMiddleOfLineEndOfLine" 而没有 "..."..."。

到目前为止，我可以做一些事情。喜欢

      <div style="float: right; overflow: hidden; white-space: nowrap;">
        <div>
          StartOfLineMiddleOfLineEndOfLine
        </div>
      </div>

这个截断了前缀，但是，我希望文本向左对齐。谢谢

Answer 1

如果需要省略号，请更改方向。

.box {
  overflow: hidden;
  white-space: nowrap;
  width: 120px;
  text-overflow: ellipsis
}

<div dir="rtl" class="box">
  StartOfLineMiddleOfLineEndOfLine
</div>

如果不需要，也可以使用 flexbox：

.box {
  overflow: hidden;
  white-space: nowrap;
  width: 120px;
  display: flex;
  justify-content: flex-end;
}

<div class="box">

  StartOfLineMiddleOfLineEndOfLine

</div>

Answer 2

正如 this article 所建议的那样，dir="rtl" 只能在基于 Firefox 的浏览器中工作，并且在 Chrome 中文本的右侧也会被剪掉。

这篇文章提出了一个（模糊的）可移植的基于 CSS 的解决方案，但它很老套：

    .reverse-ellipsis {
      text-overflow: clip;
      position: relative;
      background-color: white;
    }
    
    .reverse-ellipsis:before {
      content: '026';
      position: absolute;
      z-index: 1;
      left: -1em;
      background-color: inherit;
      padding-left: 1em;
      margin-left: 0.5em;
    }
    
    .reverse-ellipsis span {
      min-width: 100%;
      position: relative;
      display: inline-block;
      float: right;
      overflow: visible;
      background-color: inherit;
      text-indent: 0.5em;
    }
    
    .reverse-ellipsis span:before {
      content: '';
      position: absolute;
      display: inline-block;
      width: 1em;
      height: 1em;
      background-color: inherit;
      z-index: 200;
      left: -0.5em;
    }

<h2>Ellipsis is simple.</h2>
    <div class="box  ellipsis">Here is some long content that doesn't fit.</div>
    <div class="box  ellipsis">Here is some that does fit.</div>
    
    <h2>What about reverse ellipsis?</h2>
    <p>The goal would be to add ellipsis on the beginning and show the end of the content. Any idea?</p>
    <div class="box  ellipsis  reverse-ellipsis"><span>Here is some long content that doesn't fit.</span></div>
    <div class="box  ellipsis  reverse-ellipsis"><span>Here is some that does fit.</span></div>

并且内容仍将右对齐，即使内容足够短以适合内容。

如何进行文本溢出：反向省略号？

How to do text-overflow: ellipsis in reverse?

html

css

truncate