如何让字体在固定最大宽度和最大高度的容器内随字体多少在一行内自适应?
高洛峰
高洛峰 2016-10-28 14:01:26
0
1
925

1.png

1.png

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

高洛峰
高洛峰

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

全員に返信(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
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート