V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
qsnow6
V2EX  ›  问与答

CSS 问题:如何限制一行文字,自动伸缩其字体大小,但是不能超过其父容器的宽度?

  •  
  •   qsnow6 · 2023-02-20 18:12:27 +08:00 · 810 次点击
    这是一个创建于 439 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我想要实现一个标题,在不超过其父元素的 width 的情况下,自动拉伸其大小,以填宽整个容器。
    例如:字太多了,就自动缩小;字太少了就自动放大。类似等比例缩放。
    3 条回复    2023-02-20 19:39:58 +08:00
    noe132
        1
    noe132  
       2023-02-20 18:24:33 +08:00
    给字体设置一个比较大的 px 值,设置成绝对定位且不换行,获取这一段字的长度。然后监听容器大小,根据容器宽度设置一个 transform scale 。
    b821025551b
        2
    b821025551b  
       2023-02-20 18:47:13 +08:00
    <body>
    <div class="container">
    <h1>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h1>
    </div>
    </body>
    <style>
    .container h1 {
    font-size: 100px;
    font-size: clamp(1px, 4vw, 540px);
    }
    </style>
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2577 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 08:36 · PVG 16:36 · LAX 01:36 · JFK 04:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.