V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
JCZ2MkKb5S8ZX9pq
V2EX  ›  前端开发

CSS 文字适配容器宽度,横向拉伸的方法,有吗?

  •  
  •   JCZ2MkKb5S8ZX9pq · 2019-01-22 18:49:01 +08:00 · 2679 次点击
    这是一个创建于 2128 天前的主题,其中的信息可能已经有所发展或是发生改变。

    需求

    • 容器高度=文字高度(line-height)
    • 需要文字宽度超过容器宽度时,文字变窄,适配容器。
    • 文字长度未达到容器宽度时,正常显示。

    方案

    • font-stretch 没有浏览器支持,算了。
    • transform scale 应该是可行的。但要知道文字具体宽度有点麻烦。

    请问

    • 有没有什么更完美的写法?
    7 条回复    2019-01-23 15:11:55 +08:00
    newbieRenew
        1
    newbieRenew  
       2019-01-22 19:08:03 +08:00 via iPhone
    可以用 svg text 实现。至于优雅,emmm
    yixiang
        2
    yixiang  
       2019-01-22 19:08:48 +08:00
    canvas 自己画
    66beta
        3
    66beta  
       2019-01-22 19:12:52 +08:00 via Android
    横向拉伸是把字变胖的意思?
    JCZ2MkKb5S8ZX9pq
        4
    JCZ2MkKb5S8ZX9pq  
    OP
       2019-01-22 19:15:56 +08:00
    @66beta 变瘦,宽度小于容器不变胖。
    JCZ2MkKb5S8ZX9pq
        5
    JCZ2MkKb5S8ZX9pq  
    OP
       2019-01-22 19:18:04 +08:00
    @yixiang 我也觉得不行就只能 canvas 了,不过不知道小程序里支持得怎么样。还有一种更傻的方法嘛,我本地把所有文字生成一遍图片,直接调用图片去拉伸。
    66beta
        6
    66beta  
       2019-01-23 08:58:20 +08:00 via Android
    @JCZ2MkKb5S8ZX9pq 不管变瘦还是变胖都会丑,为什么要这么做呢
    JCZ2MkKb5S8ZX9pq
        7
    JCZ2MkKb5S8ZX9pq  
    OP
       2019-01-23 15:11:55 +08:00
    @66beta
    - 超宽发生概率低,约千分之五。
    - 标题超粗体窄个 20%视觉效果还可以接受,类似文悦新青年。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1202 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 18:33 · PVG 02:33 · LAX 10:33 · JFK 13:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.