1

テキストを動的に追加できる div があります。CSS 領域を使用して、テキストを 1 つの div から別の div にフローさせます。ただし、テキストに合わせるには、事前にいくつの div が必要かを知る必要があるようです。前のものがオーバーフローしたときにのみ流れるdivを作成したい。onOverflow イベントが見つかりません。以下は、HTMLRocks の例から変更した静的な例です。これが欲しいのですが、前もって3つの「リージョン」を作成する必要はありません。最初は 1 つだけ作成し、必要に応じて他のものを生成することをお勧めします。ありがとう。

<!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>
4

2 に答える 2

1

リッスンしてさらにリージョンを追加するregionoversetchangeがあります。当面は、Chrome と iOS で webkit プレフィックスを使用する必要があります。

NamedFlow には というプロパティがありますoverset。true の場合、さらにリージョンが必要です。false の場合は、必要な領域の数がより多い (または正確に) あります。

NamedFlow にfirstEmptyRegionIndexは、リージョン チェーンのどのインデックスで、コンテンツが到達していないためにリージョンが空になり始めるかを示すプロパティもあります。

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

flow.addEventListener('webkitregionoversetchange', function(){
   flow.overset // true or false
   flow.firstEmptyRegionIndex // -1 if no empty regions, other index otherwise
}
于 2013-09-25T13:04:48.503 に答える
1

jQuery を使用している場合は、スクロール幅と div の幅を比較して、さらに div を作成できます。

if ($('.region')[0].scrollWidth >  $('.region').width()) {
//Text has over-flowed, create another div
}
于 2013-06-04T14:43:47.087 に答える