如何根据文本长度自动调整固定DIV中的文本大小?
我有一个固定宽度和高度的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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
长话短说,你不能这样做,因为不同的平台和浏览器渲染字体的方式不同。
而且,没有跨浏览器、跨平台的方法来计算字体的渲染尺寸。
Javascript“解决方案”是检查
div
是否溢出,然后相应地增大其大小,例如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如果您的目标是现代浏览器,则可以使用
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