如何检测 CSS 区域中的下溢

How to detect underflow in a CSS region

本文关键字：区域 下溢 CSS 何检测 检测      更新时间：2023-09-26

当将文本排入多个区域时，javascript 属性 regionOverset 如果文本将溢出到后续区域（如果有），则返回"overset"，如果文本不会溢出该区域（但可能不会完全填充它），则返回 "fit"如何检测最后一个区域是否尚未完全填充？想象一个样式表，例如

.flow-source {-webkit-flow-into: flow;  -ms-flow-into: flow;}
.flow-container {-ms-flow-from: flow; -webkit-flow-from: flow;}
 #Leg1     {width: 8rem; height: 22rem;}

和HTML内容，如

<div class="flow-source" id="content" align="justify"> ...text here... </div>
<div class=flow-container id=Leg1></div>

然后 regionOverset 返回"fit"，即使文本只占用该区域的一小部分。我考虑将区域更改为具有最大高度而不是高度，但是如何检索最大高度以与div 的 offsetHeight 属性进行比较？

你可以做：

var element = document.getElementById('idhere');
var maxHeight = element.style.maxHeight;

我最终找到的答案是

       var element = document.getElementById("Leg1");
       var style = window.getComputedStyle(element);
       var maxHeight = style.getPropertyValue("max-height");

实际上，根据我找到的文档，

溢流表示该区域是链中的最后一个区域，并且没有足够的空间来显示剩余内容。

听起来overset确实是您想要的值。

请参阅 http://docs.webplatform.org/wiki/apis/css-regions/Region/regionOverset。
另请参阅 http://docs.webplatform.org/wiki/apis/css-regions/NamedFlow/firstEmptyRegionIndex

相关文章：