CSS - 将div内的长连续文本向右移动？答案

【问题标题】：CSS - shift long continuous text inside the div to the right?CSS - 将div内的长连续文本向右移动？
【发布时间】：2023-03-20 13:03:01
【问题描述】：

我有一个长文本，它不适合它占据的 div。 div类如下：

.mydiv {
    overflow:hidden;
    padding:3px 3px 3px 5px;
    white-space:nowrap;
}

当然我只能看到部分文字。问题是它显示前 N 个字符，我想显示最后 N 个字符。如何使用 CSS 实现它？ Text-align 在这里没有帮助。

【问题讨论】：

标签： css alignment right-justified

【解决方案1】：

如果您能够将文本包装在另一个元素中，则可以使其工作，如this fiddle 所示。我在右边浮动了一个嵌套的<span>。

【讨论】：

【解决方案2】：

<div class="wrap">
    <div class="window">Lots of text</div>
</div>

.wrap { overflow: hidden; position: relative; }
.window { position: absolute; right: 0px; }

【讨论】：

就像一个注释：float:right 和 Pat 的例子一样，更适合我的具体情况

【解决方案3】：

您只需使用 CSS 即可：

http://jsbin.com/ususu

  <div style="width: 150px; border: 1px solid red; overflow: hidden; position: relative; height: 2em;">
      <div style="position: absolute; right: 0px; padding: .5em;white-space:nowrap;">
  aaaaaaaaaaaabbbbbbbbbcccccccccccccccccddddddddddddddddddddeeeeeeeeeeeeeeeeeeeeffffffffffffffffffffgggggggggggggggggggghhhhhhhhhhhhhhhhiiiiiiiiiiiii
     </div>
  </div>

（在 Firefox 中测试。YMMV）

【讨论】：

【解决方案4】：

您必须使用 javascript 将 div 一直滚动到右侧，尝试：

var obj = document.getElementById("div-id");
obj.scrollLeft = obj.scrollWidth - obj.clientWidth

【讨论】：