Continuing Overflowed Text in a Different Div

Continuing overflowed text in a different div?

What you want is CSS Regions module proposed by Adobe and currently supported by zero browsers. Adobe did release a very rough webkit-based browser for playing with the spec if you're really interested. But as others have said, right now you're SOL and will need to find another solution.

• http://www.adobe.com/devnet/html5/articles/css3-regions.html
• http://labs.adobe.com/technologies/cssregions/
• http://dev.w3.org/csswg/css3-regions/

Text overflows into other div when window is resized

Most of your css seems redundant here. By using position absolute you are removing the elements from the document flow.

I recommend you instead use flexbox as it's much better designed to handle this type of layout.

.middle .portSection {
  display: flex;
  height: 450px;
}

.middle .portSection .left {
  background: #f88;
  flex:1;
}

.middle .portSection .right {
  background: #88f;
  flex:1;
}

.middle .portSection .left .description {
  font-size: 30px;
}

<div class="middle">
  <div class="portSection">
    <div class="left">

    </div>
    <div class="right">
      <p class="description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue nisi pellentesque, consectetur tellus sit amet, convallis sem. Pellentesque in ante mauris. Quisque sodales ex sagittis, eleifend tellus eget, iaculis risus. Aenean imperdiet risus
        eu lacus varius, non auctor tortor vehicula. Phasellus sed augue in neque auctor tempor. Cras bibendum mauris velit, id rhoncus diam fermentum eget. Proin quis condimentum nisl. Fusce consequat augue ullamcorper, ornare felis quis, volutpat mauris.
      </p>
    </div>
  </div>
</div>

Overflowed text with html in another div

jQuery .text method returns only plain text. Try using .html instead.

Example:

var text = currentCol.html();

But if your tags contain any spaces (like <span class="some-class">) then the following line from your code will do a mess with your text

var wordArray=text.split(' ');

You might want to change it to

text = text.replace(/ (?![^<>]*>)/gi, '%^%');
var wordArray = text.split('%^%');

This is kind of workaround since you could iterate over each regex match and substring it on every space character but IMHO the above idea with %^% combination is much more simple. you can replace those 3 signs with anything you want. I just thought it is unique enough that won't be used in any other purpose.

Above regular expression is simplified and assumes that you don't use < and > signs in your text.

If you actually do I would recommend to replace them with < and > anyway.

How can I make a div with long text go to next line as it was only text-overflow?

I found the answer. For me it was a combination of display: inline and white-space: initial and word-break: break-all. The structure that I had was more complicated, but having inline to elements down the tree did the trick!

Thank you for your answers!

How to make overflown text of one div to seamlessly move into another div

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!

Transfer overflow from one div to another

this is sort of JS only.

what you should do in JS:

1. get the height of cont1
2. when content is loaded to cont1, get the <p> height
3. if <p>'s height > cont1's height, remove text (and store it to a temporary variable) starting from the end of of the text in<p>'s until it's height is equal or lesser than cont1.
4. the removed text (which was stored earlier) will be dumped into the second cont2. wrap the text in <p> so that if you plan to do this feat again, you have 2 containers to deal with again.

not the most elegant of code (loop will lag when content is very long), but it's worth a try

HTML:

<div id="cont1">
    <p>long text here</p>
</div>
<div id="cont2">
    <p><!-- future content --></p>
</div>

CSS:

#cont1{
    height:100px;
    background:red;
    margin-bottom:10px;
    padding:10px;
}
#cont2{
    height:100px;
    background:blue;
    margin-bottom:10px;
    padding:10px;
}

​

JS:

//existing text must be rendered in the first container so we know how high it is compared to the div

//get references to avoid overhead in jQuery
var cont1 = $('#cont1');
var cont1Height = cont1.height();

var p1 = $('#cont1 p');
var p1Height = p1.height();

var p2 = $('#cont2 p');

//get text and explode it as an array
var p1text = p1.text();
p1text = p1text.split('');

//prepare p2 text
p2text = [];

//if greater height
while (p1Height > cont1Height) {

    //remove last character
    lastChar = p1text.pop();

    //prepend to p2 text
    p2text.unshift(lastChar);

    //reassemble p1 text
    p1temp = p1text.join('');

    //place back to p1
    p1.text(p1temp);

    //re-evaluate height
    p1Height = p1.height();

    //loop
}

//if less than, assemble p2 text and render to p2 container
p2.text(p2text.join(''));​

---

Related Topics