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

发布于 2024-10-01 03:24:14 字数 107 浏览 2 评论 0原文

我有一个固定宽度和高度的DIV,我需要在里面放入文本。 问题是,该文本可以有不同的长度(按字母顺序),所以我不介意在溢出时减小其大小。

但我怎样才能做到这一点呢?

谢谢

I have a fixed width and height DIV, and I need to put text inside.
Problem is, this text can be in different lengths (letter-wise), so I dont mind to reduce its size once its overflowing.

But how can I do that?

Thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

梦纸 2024-10-08 03:24:15

长话短说,你不能这样做,因为不同的平台和浏览器渲染字体的方式不同。

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

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

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

Long story short, you can't do it, since various platform and browsers render fonts differently.

And, there's no cross-browser, cross-platform method to calculate the font's rendered dimensions.

A Javascript "solution" is to check if the div is overflowing, and then bump up its size accordingly, something like

while (div.scrollHeight >= div.offsetHeight) {
    div.style.height = (parseInt(fontSpan.style.fontSize) + 1) + 'px';
}
任谁 2024-10-08 03:24:14

如果您的目标是现代浏览器,则可以使用 window.getCompulatedStyle
它返回应用于元素的所有真实样式属性的集合。

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

以下是描述:https://developer.mozilla.org/en/DOM:window。获取计算样式

You can use window.getComputedStyle if you target modern browsers.
It returns a collection of all real style properties applied to an element.

When you assign your text, you can get its size and compare it with the size of the div. And reduce or increase the font size and measure again.
In a few loops you should get the text in the DIV.

Here is a description: https://developer.mozilla.org/en/DOM:window.getComputedStyle

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文