一个容器中填值,值太多不换行,而是调小字体大小和行高

news2025/1/21 14:19:51
<!-- clampLineHeight 重计算行高 -->
<!-- clampTextSize 重计算字体大小 -->
<!-- 这里的div高8mm, 宽6cm, 文本为text -->
<div style="height:8mm;width:6cm;text-align:left"><span :style="{ fontSize: clampTextSize(text, '6cm'), lineHeight: clampLineHeight(text, '6cm') }">{{ text }}</span></div>
clampLineHeight(text, fontSize) {
    const fanalFontSize = this.clampTextSize(text, fontSize);
    const lineHeightRatio = 1.2; // Adjust this value as needed
    return `calc(${fanalFontSize} * ${lineHeightRatio})`;
},
clampTextSize(text, fontSize){
    const maxFontSize = '14px'; // 限制最大字号
    const minFontSize = '8px'; // 限制最小字号
    const containerWidth = fontSize;
    return `clamp(${minFontSize}, calc(${containerWidth} / ${text.length}), ${maxFontSize})`;
},

实现效果:

甲方单位,原本内容过多,会溢出(换行等),现在会自动缩小字体和行高

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1290262.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Redis——某马点评day03——part2:秒杀业务异步优化

异步秒杀思路 原本的流程是如下所示&#xff0c;必须从开始到创建订单成功才会返回响应。就像饭店里面从下单到上菜都是一个人在服务&#xff0c;就导致服务员利用率很低&#xff0c;后一个顾客要等到前一个顾客上完菜才可以下单。 最简单的优化就是加员工&#xff0c;一次性…

基于单片机自动饮料混合机控制系统设计

**单片机设计介绍&#xff0c;基于单片机自动饮料混合机控制系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机自动饮料混合机控制系统设计是一个涉及多个领域的复杂项目&#xff0c;包括单片机技术、传感器技术…

开发者的福音:TinyVue 组件库文档大优化!类型更详细,描述更清晰!

你好&#xff0c;我是 Kagol。 前言 从今年2月份开源以来&#xff0c;有不少朋友给我们 TinyVue 组件库提了文档优化的建议&#xff0c;这些建议都非常中肯&#xff0c;我们也在持续对文档进行优化&#xff0c;并且从中总结出了大家对于文档优化的一些共性问题&#xff0c;形…

redis应用-分布式锁

目录 什么是分布式锁 分布式锁的基本实现 引入过期时间 引入校验id 引入lua 引入看门狗 引入redlock算法 什么是分布式锁 在一个分布式系统中,也会涉及到多个节点访问同一个公共资源的情况,此时就需要通过锁来做互斥控制,避免出现类似于"线程安全"的问题. 而…

Vis.js教程(三):设置关系图的节点关系指向

1、引言 在 Vis.js教程&#xff08;一&#xff09;基础关系图中&#xff0c;我们介绍了基础关系图的创建&#xff0c;以及关系图的简单样式修改。 这一节我们介绍如何给关系图添加节点之间的关系指向。 2、关系指向添加 // create an array with edgesconst edges new vis…

线上项目修改最后一招 修改jar中的文件并重新打包成jar

解压jar包 在要操作的jar文件上边cmd打开命令提示符窗口&#xff08;windows系统&#xff09;&#xff0c; 在cmd命令下执行 jar -xvf xxx.jar 解压jar包&#xff08;其中xxx.jar换成你的jar包名&#xff09; jar -xvf admin-1.0.0.jar 替换或者更改操作 如果要替换jar压缩…

【Redis】Redis的内部设计与实现

Redis的设计、实现 数据结构和内部编码 type命令实际返回的就是当前键的数据结构类型,它们分别是:string(字符串)hash(哈希)、list(列表)、set(集合)、zset (有序集合),但这些只是Redis对外的数据结构。 实际上每种数据结构都有自己底层的内部编码实现,而且是多种实现,…

K-Radar:适用于各种天气条件的自动驾驶4D雷达物体检测

文章&#xff1a;K-Radar: 4D Radar Object Detection for Autonomous Driving in Various Weather Conditions 作者&#xff1a;Dong-Hee Paek&#xff0c; Seung-Hyun Kong&#xff0c;Kevin Tirta Wijaya 编辑&#xff1a;点云PCL 代码&#xff1a;https://github.com/ka…

【使用高德开放平台API和js的Ajax代码实现定位并获得城市的天气情况】

使用高德开放平台API和js的Ajax代码实现定位并获得城市的天气情况 1、注册高德开放平台账号&#xff0c;免费获得Web服务API应用key 高德开放平台Web服务API 按照API点击申请KEY 登录后进入应用管理 新建应用&#xff08;随意起名&#xff09; 然后添加key提交即可 然后就可…

开发步骤、Java开发工具

目录 一、开发步骤 二、Java开发工具 JDK安装完毕&#xff0c;我们就可以开始开发第一个Java程序了&#xff0c;习惯性的成为HelloWorld。 一、开发步骤 Java程序开发三步骤&#xff1a;编写、编译、运行 -将Java代码编写到扩展名为.java的源文件中 -通过javac.exe命令对…

【办公软件】Win10/Win11复制粘贴必须刷新才能显示

更换了新的一台电脑&#xff0c;但是发现新建文件夹或是复制粘贴文件时&#xff0c;不管是在桌面还是在其他磁盘中都需要右击刷新一下才显示。让人很郁闷&#xff0c;比如新建一个文件夹不显示以为没有新建成功&#xff0c;导致重复建了好几个。 如何解决&#xff1f; 使用Wi…

链路追踪详解(三):分布式链路追踪标准的演进

目录 Google Dapper Twitter Zipkin Uber Jaeger OpenTracing 和 OpenCensus OpenTelemetry 小结 分布式链路追踪是现代云计算和微服务架构中一个关键技术&#xff0c;可以让开发者和运维团队理解和监控服务请求在复杂系统中的完整流转路径。分布式链路追踪技术的发展经历…

岚图追光PHEV 25.28万元起售,开卷混动豪华轿车

作者&#xff5c;Amy 编辑&#xff5c;德新 12月5日晚&#xff0c;2023岚图科技日上&#xff0c;岚图汽车正式发布了其新一代SOA电子电气架构天元架构&#xff0c;并宣布了以“新行政电动旗舰”为定位的岚图追光PHEV正式上市。 岚图追光PHEV是岚图汽车旗下首款电混轿车&#x…

【LeetCode刷题】-- 79.单词搜索

79.单词搜索 方法&#xff1a;使用回溯 使用dfs函数表示判断以网格的(i.j)位置出发&#xff0c;能否搜索到word(k)&#xff0c;其中word(k)表示字符串word从第k个字符开始的后缀子串&#xff0c;如果能搜索到&#xff0c;返回true,反之返回false 如果board[i][j]≠word[k]&am…

【S32K3环境搭建】-0.3-S32DS安装实时驱动RTD(Real-Time Driver)

目录 1 什么是“实时驱动RTD(Real-Time Driver)” 2 安装“实时驱动RTD(Real-Time Driver)” 2.1 方法一&#xff1a;通过S32DS Extensions and Updates安装“实时驱动RTD(Real-Time Driver)” 2.2 方法二&#xff1a;通过Install New Software…安装“实时驱动RTD(Real-Ti…

什么是LIMS实验室信息管理系统 LIMS系统功能介绍

实验室信息管理系统&#xff0c;也称为 LIMS系统&#xff0c;是一种软件解决方案&#xff0c;它通过自动化手动流程来支持现代实验室操作。因此&#xff0c;生命科学专业人员可以实时访问准确无误的信息。该软件使用户能够更有效地管理样本、分析相关数据并根据相关数据采取行动…

高端角雷达参考设计(TI文档)

说明 该参考设计使用了 AWR2944 评估模块 (EVM)&#xff0c;为角雷达应用满足 NCAP R79 安全要求奠定了基础。该设计使用户能够估算和跟踪器件视场内最远 200m 的物体位置&#xff08;在方位平面中&#xff09;和速度。该应用主要面向提供多种功能&#xff08;如盲点检测、前侧…

《Java 并发编程艺术》笔记(上)

如何减少上下文切换 减少上下文切换的方法有无锁并发编程、CAS算法、使用最少线程和使用协程。 无锁并发编程&#xff1a;多线程竞争锁时&#xff0c;会引起上下文切换&#xff0c;所以多线程处理数据时&#xff0c;可以用一些办法来避免使用锁。如将数据的 ID 按照 Hash 算法…

用modelbox server启动流程图,暴露Restful接口

背景 假设你已经搭建了modelbox开发容器&#xff0c;能够使用webUI构建流程图。如果没有请参考昇腾npu上构建modelbox webUI开发容器教程。 现在&#xff0c;本文会说明&#xff0c;如何在终端用命令的方式将流程图暴露为服务&#xff0c;并能够在本地用postman访问。 本文参…

「智慧城市」这一概念科学吗?还是炒作?

智慧城市是一个综合性的概念&#xff0c;它利用信息技术和创新概念&#xff0c;将城市的各个系统和服务集成起来&#xff0c;以提升城市运行效率、优化城市管理和服务&#xff0c;改善市民的生活质量。 具体来说&#xff0c;智慧城市涵盖了许多领域&#xff0c;包括城市规划、建…