“最适合”字体大小-如何测量句子宽度?
|
我遇到了定制内容管理系统设计中的一个常见问题。
我经营一家小型网页设计公司,经常需要对客户的网站进行某些区域的编辑。例如,页面顶部可能有一个栏,用于宣传客户希望能够自己编辑的最新新闻或交易。
我遇到的问题是他们经常写太多东西,文本溢出。也许我有点过于防御,但是在这种情况下,我通常会私下责怪客户-当然,他们会在更新文本后进行检查,发现它不合适,然后对其进行修改以使其正确吗?
无论如何,我想让网站看起来更好是我的责任,所以我一直在尝试寻找一种使文本适合固定大小的框的方法。一种方法是为该框(通常为
div
)赋予此CSS属性:
overflow: auto;
但是有时候这是不合适的,例如在上述示例中,条形图只有一行高。
我的问题(是,我终于明白了)是如何自动使字体更改大小以使其适合盒子?
在某些应用程序中(Powerpoint是一个示例),您可以为字体大小选择一个“最适合”选项,而应用程序选择的大小可以使文本准确适合。我基本上是在寻找CSS,JavaScript或PHP版本。
提前致谢!
编辑:这是解决方案-http://jsfiddle.net/Cnkfn/1/
没有找到相关结果
已邀请:
3 个回复
甲车劲
它检查内部div的高度是否大于外部div的高度。它在假设内部div没有填充的情况下工作(您可以根据需要进行调整)。它将内部div的字体大小减小1px,直到内部div的高度不再大于外部div的高度为止。 您可以在显示客户端文本的页面上使用类似这样的代码,在这种情况下,您可以将其包装到一个在ondomready中执行的匿名函数中。我相信您可以修改它以适合您的实现。
宠封钞轰
属性,看看它是否比您期望的大,如果这样,请将字体设置为小1点,然后重复执行,直到
是您所期望的。 https://developer.mozilla.org/en/DOM/element.scrollHeight
扑北爱