javascript - 是否可以在溢出的情况下缩小字体大小？

Question

overflow 属性允许隐藏不适合边界框的内容，或者可以显示滚动条以通过较小的视口(viewport)滚动内容。

但是是否也可以缩 child 子的字体大小以防止溢出？

一般来说，缩小文本大小是没有选择的，但我使用 Unicode pictographs字体大小为 300%。在这种情况下，将字体大小缩小到 100% 是可以接受的。

是否可以检测到溢出？

Answer 1

是的，是的。我目前正在开发一个没有任何框架/库的 Web 应用程序，我必须满足类似的要求。就我而言，不允许我更改字体大小，但我必须缩短可能很长的字符串，直到它适合为止。

我将很快解释我的解决方案，但现在手头没有代码。我相信您可以轻松地根据您的需要调整我的解决方案。

对我来说，能够测量文本宽度的关键是将文本放入 <span> 中。 .我不知道有什么方法可以直接测量文本的宽度，但是可以很容易地测量跨度的宽度:

/* Let 'spanid' be the id of the span containing the text */
width_of_text = document.getElementById("spanid").offsetWidth;

然后将该宽度与包含元素(我假设它只是父元素)的宽度进行比较:

width_of_containing_element = document.getElementById("spanid").parentNode.clientWidth;

现在您知道了文本的宽度及其包含元素的宽度，可以轻松地比较它们。

我已经在 Firefox(最新的桌面版本)、Chrome(最新的桌面版本)和 IE11 中对此进行了测试。我还没有在 Edge 中测试它，但我很确定它也能在那里工作。

此解决方案仅考虑水平溢出。我没有测试是否可以用相同的方法检测到垂直溢出(但想了几秒钟后:为什么不呢？)。