1

我有一个可以动态添加文本的 div。使用 CSS 区域，我使文本从一个 div 流向另一个。但是，似乎我必须提前知道我需要多少个 div 才能适合文本。我只想创建一个 div 以在它溢出之前流入。我一直无法找到 onOverflow 事件。下面是我从 HTMLRocks 示例修改的工作静态示例。我想要这个，但不必预先创建 3 个“区域”。我宁愿一开始只创建一个，然后根据需要生成其他的。谢谢。

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

如果您使用 jQuery，您可以将滚动宽度与 div 宽度进行比较，然后创建更多 div。

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

有regionoversetchange可以收听和添加更多区域。目前，您将不得不在 Chrome 和 iOS 中使用 webkit 前缀。

NamedFlow 有一个名为 的属性overset。如果为真，则需要更多区域。如果它是错误的，那么您有更多（或确切地说）所需的区域数量。

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 回答