Question

当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 + "<br />Font Size=" + obj.style.fontSize;
    Results.innerHTML += "<br />scrollWidth=" + obj.scrollWidth;
    Results.innerHTML += "<br />offsetWidth=" + obj.offsetWidth + "<br /><br />";
  }
}

.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 -->
<br />
<div id="Box2" class="box">xxx</div>
<!-- fits no problem -->
<br />
<div id="Box3" class="box">FFF</div>
<!-- fits no problem -->
<br />
<div id="Results"></div>

scrollWidth未检测到溢出

0 个答案: