search

Home  >  Q&A  >  body text

javascript - 如何使文字大小自适应容器大小?

容器大小是固定的,要在容器内随机地显示一段文字,如何能让文字的大小自适应容器的大小呢?无论字数多少都要撑满整个容器

高洛峰高洛峰2902 days ago384

reply all(3)I'll reply

  • 迷茫

    迷茫2017-04-10 15:13:02

    纠正一下,zoom被现代浏览器支持。css-tricks的链接是2013年的说明。谢谢@Humphry指出,经测试,FF、GG、IE等现代版本均支持该属性,不需要私有前缀。

    1楼的zoom只有IE支持 https://css-tricks.com/almanac/properties/z/zoom/ 所以这种方式并不被推荐

    不知道这样符合楼主要求不
    https://jsfiddle.net/dwqs/zdtqgd0z/

    $(function(){
        var t = $("#box").height() / $("p").height();
        $("p").css({
            lineHeight:t*16+"px",
            height:t*$("p").height(),
    
        });
    })
    

    reply
    0
  • 巴扎黑

    巴扎黑2017-04-10 15:13:02

    使用 zoom 来搞定的方法。不是特别完美,但是非常简单。

    http://jsfiddle.net/fjtpcfpv/

    reply
    0
  • 大家讲道理

    大家讲道理2017-04-10 15:13:02

    好像没啥比较优雅的办法

    容器内再增加一层不限制大小的容器,内容填在内层容器里面,然后比较大小,根据结果调整字体,反复比较最后得到最近似的大小

    reply
    0
  • Cancelreply