logo标签列表

如何使一个div中溢出的文本无缝地移动到另一个div中

htmlcss
16

有没有可用的jQuery插件或CSS技巧可以让我做到这一点?

   +---------------+
   |This is a      |
   |very long      |
   |text in this   |
   |div which will |
   |overflow and   |
   +---------------+        

                      +---------------+
                      |spill into     |
                      |this div.      |
                      |               |
                      |               |
                      |               |
                      +---------------+

编辑：这两个 div 可以位于页面的任何位置，文本必须驻留在这些 div 内。

两个div中可以存在相同的文本吗（物理上而非视觉上）？ - MMM
4个回答
3
这远非最佳解决方案，但我能想到的是这样的 - ish： http://jsfiddle.net/U79Kg/ 这可能不是你想要的，但希望能指出正确的方向！
是的。可能还有更优雅的方法，但这就是我正在寻找的解决方案类型。 - intellidiot
1
你可以使用类似 column-count 这样的代码（仅适用于CSS3）。但不确定是否可以将第二列放置在另一个位置。
div{
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

这个 jQuery 插件旨在将一个文本分成多个部分（列，无论你想怎么称呼它们）：http://welcome.totheinter.net/columnizer-jquery-plugin/

2
这实际上与相邻的列无关。这两个div可以存在于dom中的任何位置。 - intellidiot
我喜欢这个解决方案。谢谢！ - mark879
0
2
在您的演示中，您实际上将文本的一部分向左推，另一部分向右推。但我的原始问题不是这个。这些文本必须存在于这两个div内。而这两个div可以位于页面的任何位置。 - intellidiot
0

这里有一个基于两个假设的解决方案：

  1. 相同的文本可以存在于两个div中
  2. 'line-height'设置为适合div

此解决方案使用CSS和一行JavaScript代码（jQuery）： http://jsfiddle.net/wzEXZ/1/

不错。我想你是指$("#b").scrollTop($("#a").innerHeight());否则他们必须具有相同的高度。同时，我猜它们仍然必须具有相同的宽度等。 - nafg
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接