小于12px字体的处理方法

最新推荐文章于 2024-07-19 19:08:32 发布

杨哥杨哥万万岁

最新推荐文章于 2024-07-19 19:08:32 发布

阅读量1.4k

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/wozhenhaokan/article/details/122242367

版权

项目中有文字标签需要固定宽度，所以需要对超过字数限制的标签做特殊处理，预设的字体是12px，产品那边让继续缩小字体，常规的话肯定是不能缩小了，所以想到了用scale缩放，但是缩放的话也遇到了一些问题，都放在代码注释里了，可以自己运行起来看下效果。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>小于12px字体处理方案</title>
  <style>
    div {
      width: 60px;
      text-align: center;
      border: 1px solid #000;
    }

    span {
      font-size: 12px;
    }

    .span1 {
      /* 直接设置8px肯定是不生效的，chrome支持的最小字体是12px */
      font-size: 8px;
    }

    .span2 {
      font-size: 12px;
      /* transform对行内元素不生效 */
      display: inline-block;
      /* 单纯使用缩放的话，我们会看到其实左右还有剩

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

杨哥杨哥万万岁

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小于12px字体的处理方法

项目中有文字标签需要固定宽度，所以需要对超过字数限制的标签做特殊处理，预设的字体是12px，产品那边让继续缩小字体，常规的话肯定是不能缩小了，所以想到了用scale缩放，但是缩放的话也遇到了一些问题，都放在代码注释里了，可以自己运行起来看下效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小于12px字体处理方案&l...
复制链接

扫一扫