如何知道文本從一個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區域溢出到另一個區域？

回答

相關問題