如何知道文本从一个CSS区域溢出到另一个区域？

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

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

来源

2013-06-03 Phlox Midas

你是否需要所有的div都是100px宽？你可以创建一个div，它将和父容器一样宽。 – stackErr

您可以尝试将此添加到您的区域css'word-wrap：break-word;' – stackErr

据我所知，我可以使它与父母的大小相同，但我想要有其他大小。我选择100px作为示例。我不相信“文字包装：真言”;是我正在寻找的。这只是为了在分栏结束时分手。但是，谢谢你的尝试。 –

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

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

来源

2013-06-04 14:43:47 stackErr

有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-25 13:04:48

如何知道文本从一个CSS区域溢出到另一个区域？

回答

相关问题