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

Is there any jQuery plugin or CSS trick available which allows me to do this?

是否有任何jQuery插件或CSS技巧可以让我这样做?

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

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

EDIT: These 2 divs can be located anywhere in the page and texts have to reside inside the divs.

编辑:这两个div可以位于页面的任何位置,文本必须位于div内。

4 个解决方案

#1

This is far from the best solution but from the top of my head I'd do it like this-ish:

这远不是最好的解决方案,但从我的头脑中我会像这样做:

http://jsfiddle.net/U79Kg/

This might not be what you're after but hopefully a pointer in the right direction!

这可能不是你想要的,但希望指向正确的方向!

#2

You can use something like column-count (CSS3 only). Not sure though if you can position the second column in a different place.

您可以使用列计数(仅限CSS3)。不确定是否可以将第二列放在不同的位置。

div{
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

This jQuery plugin is designed to divide one tekst in multiple sections (columns, whatever you want to call them): http://welcome.totheinter.net/columnizer-jquery-plugin/

这个jQuery插件被设计为在多个部分中划分一个tekst(列,无论你想要什么叫它们):http://welcome.totheinter.net/columnizer-jquery-plugin/

#3

You can do it with CSS only, using floating boxes like this: http://jsfiddle.net/W4bHQ/

您只能使用CSS,使用这样的浮动框:http://jsfiddle.net/W4bHQ/

#4

Here is a solution based on two assumptions:

以下是基于两个假设的解决方案:

The same text can exist in both divs

两个div中都可以存在相同的文本

'line-height' is set to fit the div nicely

'line-height'被设置为很好地适合div

This solution uses CSS and one line of JavaScript (jQuery): http://jsfiddle.net/wzEXZ/1/

这个解决方案使用CSS和一行JavaScript(jQuery):http://jsfiddle.net/wzEXZ/1/

#1