代码之家 › 专栏 › 技术社区 › Bostone

在DIV内将长连续文本右移?

right-justified alignment css

Bostone · 技术社区 · 15 年前

我有一个很长的文本,不适合它所占的分区。DIV类如下:

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

当然,我只能看到部分文本。问题是它显示前n个字符,我想显示后n个字符。我如何用CSS实现它? Text-align 对这里没有帮助。

4 回复 | 直到 15 年前

Pat 15 年前

如果能够将文本换行到另一个元素中,则可以使其工作,如中所示。 this fiddle . 我漂浮在一个巢穴里 <span> 向右。

Ian Wetherbee 15 年前

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

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

DA. 15 年前

你只需使用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>

(在火狐中测试。YMMV)

bimbom22 15 年前

您必须使用javascript将该DIV一直向右滚动,请尝试:

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

推荐文章

PkDrew · 在结构定义中声明“alignas”关键字与结构定义的数组之间有什么区别吗?

1 年前

Rad · 点击下拉菜单按钮时,它会在框架内移动

1 年前

David Lytle · Javascript幻灯片对齐

2 年前

Hana.HD · 如何在flutter中更改listtile中标题和副标题的对齐方式?(从右到左)

2 年前

2 年前

CheeseFlavored · CSS-如何根据屏幕大小更改DIV的顺序?

2 年前

Riya · 如何将imageview放置在线性布局水平方向的右端

2 年前

Kris · 如何将视口外DIV与可见视口DIV完美对齐

2 年前

Ihsan Ahmad · 文本输入和复选框输入不对齐

2 年前

Dragynjump · 为什么对齐按钮中的项目会更改按钮的位置?

3 年前