How can I know when text overflows from one CSS region to another?

Question

I have a div that text can be dynamically added to. Using CSS regions, I make the text flow from one div to another. However, it seems I have to know how many divs I need in advance for fit the text. I want to only create a div to flow into when the one before it overflows. I haven't been able to find an onOverflow event. Below is my working static example that I modified from the HTMLRocks example. I would like this but without having to create 3 "regions" up front. I'd prefer to only create one at first and then generate others as needed. Thanks.

<!DOCTYPE html>
<html>
<head>
  <style>
    #content {
      -webkit-flow-into: article-flow;
      display: -webkit-flex;
      display: flex;
    }

    .region {
      -webkit-flow-from: article-flow;
      box-sizing: border-box;
      width: 100px;
      height: 100px;
      padding: 10px;
      border: solid 2px black;
    }
  </style>
</head>
<body>
  <div class="region"></div>
  <div class="region"></div>
  <div class="region"></div>
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  </div>
</body>
</html>

do you need all the divs to be 100px wide? You can just create one div and it will be as wide as the parent container. — stackErr, Jun 03 '13 at 19:42
You can try adding this to your region css 'word-wrap: break-word;' — stackErr, Jun 03 '13 at 19:52
I understand that I could make it the same size as the parent but I want to have some other size. I choose 100px for the example. I don't believe that "word-wrap: reak-word;" is what I'm looking for. That's just for breaking up words when they reach the end of a column. But thanks for the attempts. — Phlox Midas, Jun 03 '13 at 20:58
also: http://stackoverflow.com/questions/143815/how-to-determine-using-javascript-if-html-element-has-overflowing-content/143889#143889 — stackErr, Jun 04 '13 at 17:00

score 1 · Answer 1 · answered Jun 04 '13 at 14:43

1

If you are using jQuery you can compare the scroll width with the divs width and then create more divs.

if ($('.region')[0].scrollWidth >  $('.region').width()) {
//Text has over-flowed, create another div
}

answered Jun 04 '13 at 14:43

stackErr

4,130
3
24
48

score 1 · Answer 2 · answered Sep 25 '13 at 13:04

There is the regionoversetchange to listen to and add more regions. For the moment, you will have to use the webkit prefix in Chrome and iOS.

The NamedFlow has a property called overset. If true, more regions are needed. If it is false, you have more - or exactly - the amount of regions required.

The NamedFlow also has a firstEmptyRegionIndex property which indicates at which index of the region chain do regions start to be empty because no content has reached them.

var flow = document.webkitGetNamedFlows()['myFlow']

flow.addEventListener('webkitregionoversetchange', function(){
   flow.overset // true or false
   flow.firstEmptyRegionIndex // -1 if no empty regions, other index otherwise
}

How can I know when text overflows from one CSS region to another?

2 Answers2