当scrollWidth没有帮助时，如何准确检测Javascript中的溢出？
我的目标是在div中显示可能的最大文本而不超过div边界（即没有溢出） . 有问题的文字可以是一个字母，也可以是一个长段 .
我遇到的问题是，小写“f”（非固定宽度字体）的一部分确实溢出，但scrollWidth表示没有发生溢出（即element.scrollWidth == element.offsetWidth） .
我知道这不会是固定宽度字体的问题，所以请避免建议它们 .
代码片段说明溢出（至少在视觉上），但scrollWidth没有超过div宽度 . 我在Windows 7（Chrome版本54，FireFox 50.0，IE 11），Kindle Fire（Silk），iPad（iOS 9.3.5 Safari）和Android 5.1.0中重现了相同的结果（最后“f”超出界限） Chrome 54.0） .
经过大量研究，我已经排除了连字设置，字母间距和附加零宽度非连接器（ZWNJ），因为在这种情况下，它们似乎都没有用于触发或避免溢出 . 我已经阅读了与[javascript] "offsetWidth" "scrollWidth" "overflow"相关的每篇StackExchange帖子 . 我甚至从http://opentype.js.org检查了字体结构，其中小写的“f”超过了“Draw Metrics”，这可能会给出解决方案的提示，但此时我无法理解 .
window.onload = main;
function GrowToFit(obj) {
if (obj.offsetWidth == obj.scrollWidth) {
//No overlap, grow font by 1 px
obj.style.fontSize = ++x + "px";
//Repeat
GrowToFit(obj);
} else {
//back off 1 font size so no overlap
obj.style.fontSize = --x + "px";
}
}
function main() {
var i;
for (i = 1; i <= 3; i++) {
x = 1;
obj = document.getElementById("Box" + i);
GrowToFit(obj);
Results.innerHTML += "Box" + i + "
Font Size=" + obj.style.fontSize;
Results.innerHTML += "
scrollWidth=" + obj.scrollWidth;
Results.innerHTML += "
offsetWidth=" + obj.offsetWidth + "
";
}
}
.box {
width: 200px;
white-space: nowrap;
display: block;
background-color: red;
/* For contrast */
font-size: 1px;
/*Will upsize in GrowToFit*/
overflow: visible;
}
<div id="Box1" class="box">fff</div>
<!-- last f will hang outside div -->
<div id="Box2" class="box">xxx</div>
<!-- fits no problem -->
<div id="Box3" class="box">FFF</div>
<!-- fits no problem -->
<div id="Results"></div>