首页 > 其他分享 >字体自适应大小一行展示

字体自适应大小一行展示

时间:2023-05-09 18:33:06浏览次数:27  
标签:12 展示 text dom 一行 fontFamily let 字体

字体自适应大小一行展示,最小为12,若还是超出则css的...代替

代码,以300px宽度为例

<template>
       <div class="comparyname" ref="comparyName"><div class="comparyname2">公司名称:目的地看似课的手机待机时间程VS的说几句参加考试的</div></div>
</template>

<script>
import {  onMounted, ref} from 'vue';
export default {
  name: "iwebOffice",
  components:{},
  setup() {
    const comparyName = ref(null)

    /**
      * text:文本
      * maxWidth:文本最大宽度
      * fontFamily:字体
      * minSize:最小字号
      * maxSize:最大字号
      * 
      * 此处设置最小字体为12,若12还超出给定宽度,可以使用css的...来实现一行展示,若不超出,则一点一点加大字体,找到最适合的一个字号,最大为50可更改
    */
    const getNewFont = function(text,maxWidth,fontFamily,minSize=12,maxSize=50){
      //创建画布
      let canvas = document.createElement('canvas')
      let context = canvas.getContext('2d');
      //找出能适应的最大字体
      for(var i=minSize;i<maxSize;i++){
        //给画布设置字体和字体大小,并获取此时宽度,判断是否超出最大宽度,返回合适的值
        context.font = i+"px "+fontFamily;
        const detail = context.measureText(text);
        const width = detail.width;
        if(width==maxWidth){
          return i
        }
        if(width>maxWidth){
          return i-1
        }
      }
      return i>maxSize?maxSize:i;
    }
    onMounted(()=>{
      let dom = comparyName.value
      const text = dom.innerText
      const fontFamily = getComputedStyle(dom).fontFamily
      let swidth = parseInt(getComputedStyle(dom).width)
      let newFont = getNewFont(text,swidth,fontFamily,12,30)
      dom.style.fontSize = newFont+'px'
    })
    return {
      comparyName
    };
  }
}
</script>

<style scoped>
.comparyname{
  margin-left: 100px;
  width: 300px;
}
.comparyname2{
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #444;
  font-weight: bold;
}
</style>

效果图

未超出

avatar

avatar

超出

avatar

截图原因,宽度都是300px

标签:12,展示,text,dom,一行,fontFamily,let,字体
From: https://www.cnblogs.com/lijun12138/p/17385938.html

相关文章

  • CSS 常用苹方字体
    //苹方-简常规体font-family:PingFangSC-Regular,sans-serif;//苹方-简极细体font-family:PingFangSC-Ultralight,sans-serif;//苹方-简细体font-family:PingFangSC-Light,sans-serif;//苹方-简纤细体font-family:PingFangSC-Thin,sans-serif;//苹方-简中黑......
  • 一行代码搞定 font-size 响应式
    前言公司要做大屏,但是大屏还要有个嵌在系统的版本,屏幕(iframe)小了但字体大了怎么办。网上找了很多代码都很长,个人参考了资料后实现了一个一行代码font-size响应式。TL;DRhtml{font-size:clamp(12px,calc(7px+0.390625vw),24px);}解释在<html>标签中定义是为......
  • websocket多实例推送解决方案-数据实时展示
    需求需要前端展示实时的订单数据信息。如下图所示,实时下单实时页面统计更新展示 思路方案前端使用websocket建立通信  后端监听数据库的binglog变更,实时得到最新数据,推送到前端 现状及问题客户端想实现实时获取数据的变更,使用了websocket+kafkaMq,当......
  • 为设计师准备的 15 个免费新鲜的字体
    AxeHandelGoingFastKa-Boing!NoasarckFreshMakerHalcyoniaMANABUMAJORGUILTYRemodulaGalapogosLainieDayButterFingerPonyMakerRangerGrigovia djdesignerlab......
  • 图片太小,增加图片大小,无需任何软件,只需一行命令
    方法:Windows命令行自带的copy命令命令:copy原图名称/b+需要扩充的文件名称新图名称测试:1、在文件地址栏输入cmd按回车   2、输入命令:copy1.png/b+2.zip3.png 3、查看图片大小 ......
  • Grafana 系列-统一展示-3-Prometheus 仪表板
    系列文章Grafana系列文章知识储备PrometheusTemplateVariables你可以使用变量来代替硬编码的细节,如server、app和pod_name在metric查询中。Grafana在仪表盘顶部的下拉选择框中列出这些变量,帮助你改变仪表盘中显示的数据。Grafana将这类变量称为模板变量。Query......
  • 小米商城主页展示HTML+CSS
    大佬们呀,花了好几天的时间总算是看着页面展示可以了,求赐教!小米商城主页,对大佬来说肯定简单爆了,我抄写了好久呀,总是有一点点的小问题,还搞不明白主要是一个静态的小米商城页面,HTML前端代码不复杂,一堆的div和ul、li就没问题了,主要是css代码搞不懂导致显示不正常话不多说,直接上代码......
  • Grafana 系列-统一展示-2-Prometheus 数据源
    系列文章Grafana系列文章GrafanaPrometheus数据源Grafana提供了对Prometheus的内置支持。本文会介绍GrafanaPrometheus(也包括Prometheus的兼容实现,如Thanos,Mimir等)数据源的部分选项、变量(Variable)、查询(Query)和其他针对Prometheus数据源的功能。配......
  • SQL Server 多行合并成一行,逗号分隔实现
    我们写sql脚本处理数据的时候针对部分数据进行groupby分组,分组后需要将部分数据放入分组后的行里面以逗号分隔。举一个简单例子: 如上图的数据,需要对学生进行分组,取得学生都参与了哪些学科的考试和所有总分。如下图这种数据目前有两种方案,1.在SQLServer2017版本 ......
  • Latex字体大小
    LaTeX字体大小设置设置字体大小的基本尺寸为10pt,11pt和12pt,其中默认为10pt\documentclass[12pt]{article} 声明对应字号\tiny5pt\scriptsize7pt\footnotesize8pt\small9pt\normalsize10pt\large12pt\Large1......