如何根据文本的长度自动调整固定 DIV 中的文本大小？

Posted 2023-05-08

【中文标题】如何根据文本的长度自动调整固定 DIV 中的文本大小？

【英文标题】：How to auto resize text in fixed DIV according to the text's length?

【发布时间】：2011-05-07 02:53:32

【问题描述】：

我有一个固定的宽度和高度 DIV，我需要在里面放文字。 问题是，这个文本可以有不同的长度（按字母顺序），所以我不介意一旦溢出就减小它的大小。

但是我该怎么做呢？

谢谢

【问题讨论】：

最好让你的 div 溢出，提供一个滚动条。

我不能 - 这应该是一个按钮

缩短文本并将其放在 div 中。您可以检查字符数是否超过特定数量，然后剪切文本并显示。这看起来不太好，因为不同的字母有不同的大小。

但是，我仍然不知道跨浏览器渲染的长度...

不，我建议检查字符数。

【参考方案1】：

如果您面向现代浏览器，则可以使用 window.getComputedStyle。 它返回应用于元素的所有真实样式属性的集合。

当您分配文本时，您可以获取其大小并将其与 div 的大小进行比较。并减小或增大字体大小并再次测量。在几个循环中，您应该可以在 DIV 中获取文本。

这是一个描述：https://developer.mozilla.org/en/DOM:window.getComputedStyle

【参考方案2】：

长话短说，你不能这样做，因为不同的平台和浏览器呈现不同的字体。

而且，没有跨浏览器、跨平台的方法来计算字体的渲染尺寸。

javascript“解决方案”是检查div 是否溢出，然后相应地增大其大小，例如

while (div.scrollHeight >= div.offsetHeight) 
    div.style.height = (parseInt(fontSpan.style.fontSize) + 1) + 'px';

【讨论】：

fontSpan.style.fontSize = (parseInt(fontSpan.style.fontSize) + 1) +'px';

因为它的字体大小 :-) 而不是 DIV 的高度。酷解决方案的人！我喜欢它。