javascript - How to flow text from DIV to DIV? - Stack Overflow

admin管理员组

文章数量:1310067

I have two DIVs with absolute position on two sides of a HTML page such as (EXAMPLE)

<div class="left">
</div>
<div class="right">
</div>

with CSS

.left{
    position:absolute;
    left:10px;
    top:10px;
    width:100px;
    height:100px;
    background:red;
}
.right{
    position:absolute;
    right:10px;
    top:10px;
    width:100px;
    height:100px;
    background:blue;
}

Is there a way to add text to the left DIV and flow excess text to the right one? I am not stuck to this two DIV, and I'm just looking for a solution to flow excess text to another position.

NOTE: I hope to find a pure CSS solution, though, it seems to be improbable; then, I am looking for a pure javascript solution (not using JS libraries).

I have two DIVs with absolute position on two sides of a HTML page such as (EXAMPLE)

<div class="left">
</div>
<div class="right">
</div>

with CSS

.left{
    position:absolute;
    left:10px;
    top:10px;
    width:100px;
    height:100px;
    background:red;
}
.right{
    position:absolute;
    right:10px;
    top:10px;
    width:100px;
    height:100px;
    background:blue;
}

Is there a way to add text to the left DIV and flow excess text to the right one? I am not stuck to this two DIV, and I'm just looking for a solution to flow excess text to another position.

NOTE: I hope to find a pure CSS solution, though, it seems to be improbable; then, I am looking for a pure javascript solution (not using JS libraries).

• javascript
• html
• css

Share Improve this question Follow asked Sep 1, 2013 at 11:15 GooglebotGooglebot 15.7k4545 gold badges144144 silver badges247247 bronze badges 12

• With pure CSS it's impossible :) with JS it's pretty difficult to accurately get the exact point where your text overflows – Roko C. Buljan Commented Sep 1, 2013 at 11:29
• @RokoC.Buljan, the new CSS3 properties do allow it and is supported by most browsers: caniuse./#search=column – user2417483 Commented Sep 1, 2013 at 11:30
• There is no CSS solution unless you want to use CSS columns (side-by-side). Using vanilla JS is possible, but allowing jQuery would be a lot easier for DOM-specific tasks like this. – David Hellsing Commented Sep 1, 2013 at 11:31
• @jeff how can you (using CSS3, which I usually dream at night ;) ) transport the overflowed content to an (plelety) other DIV element? – Roko C. Buljan Commented Sep 1, 2013 at 11:33
• 1 CSS regions are the solution to do this, unfortunately browser support isn't quite there yet - caniuse./#feat=css-regions – Michael Low Commented Sep 1, 2013 at 11:52

 |  Show 7 more ments

3 Answers 3

Sorted by: Reset to default 5

CSS Regions (still a 'draft', but) is aiming to fix this problem:

The CSS regions module allows content to flow across multiple areas called regions. The regions are not necessarily contiguous in the document order. The CSS regions module provides an advanced content flow mechanism, which can be bined with positioning schemes as defined by other CSS modules such as the Multi-Column Module [CSS3COL] or the Grid Layout Module [CSS3-GRID-LAYOUT] to position the regions where content flows.

More info and tutorials at https://www.adobe./devnet/archive/html5/articles/css3-regions.html

Here is one for fixed-width approach. The gap between two columns will equal to width of main div.

Fiddle

<div class="container">
    <div class="sides">The big text here.<div>
    <div class="main"></div>
</div>

For variable width you need JS or jQuery.

Update:

I have used jQuery for this purpose as I have found pure JS difficult to find solution of this.

function setGap() {
    var width = $(".main").width();
    $(".sides").css({
        "-moz-column-gap": width + "px",
            "-webkit-column-gap": width + "px",
            "column-gap": width + "px"
    });
}
$(window).resize(setGap);
setGap();

Fiddle

Update 1:

function setGap() {
    var width = document.getElementsByClassName("main")[0].offsetWidth;
    var elem = document.getElementsByClassName("sides")[0];
    var style = elem.getAttribute("style");
    if (typeof style != "null") {
        style =
            "-moz-column-gap:" + width + "px; -webkit-column-gap:" + width + "px; column-gap:" + width + "px";
        elem.setAttribute("style", style);
    }
    else {
        style +=
            "-moz-column-gap:" + width + "px; -webkit-column-gap:" + width + "px; column-gap:" + width + "px";
        elem.setAttribute("style", style);
    }
}
window.onresize = setGap;
setGap();

Fiddle

so far (2012) It's not possible using CSS, CSS3 (with 2 separate elements)

but using JS You can clone the content and use scrollTop on the right element :

LIVE DEMO

var d = document,
    $left  = d.getElementById('left'),
    $right = d.getElementById('right'),
    leftH  = $left.offsetHeight;

$right.innerHTML = $left.innerHTML +'<p style="height:'+ leftH +'px;" />';
$right.scrollTop = leftH;

As you can see I'm appending also an empty paragraph, to fix the right element need to scrollTop some amount of px

_{Note: add overflow:hidden; to your ID elements #left and #right}

本文标签： javascriptHow to flow text from DIV to DIVStack Overflow