如何让字体在固定最大宽度和最大高度的容器内随字体多少在一行内自适应？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

如何让字体在固定最大宽度和最大高度的容器内随字体多少在一行内自适应？

高洛峰 2016-10-28 14:01:26

[HTML讨论组]

1431

如图：红色方框内是允许的最大高度和最大宽度，当里面有一个字的时候，高度要最大；当多个字的时候并且超出宽度时，可以自适应地缩小。我们公司安卓掉好像用webview固定宽度高度就可以原生自适应，PC-WEB有没有简单快捷的实现方式？思路、代码demo都可以，求大牛解答。

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(1)

三叔2016-10-28 14:02:16 1楼

以前写的一段代码，思路在注释，里面的h4只是针对注释而言。兼容IE6以上。

/*    
 *    范围内的文字自动缩小字号
 *    autoFontSize($o)
 *    @param    $object    指向的em
 *    需要双层结构，如text，且h4 要有white-space: nowrap;，em是行元素
 *    读取em自动撑开的宽度，em宽度比h3宽时就会调整
 */
autoFontSize: function($o) {
    var iCW = $o.width(),
        $p = $o.parent(),
        iPW = $p.width();
    
    if (iCW > iPW) $o.css('fontSize', iPW * parseInt($p.css('font-size')) / iCW );    //h4宽度 / ( em宽度 / h4默认字体大小)
},

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>