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

<!-- 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 neededreturn `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.mzph.cn/news/202159.shtml

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

相关文章

用python测试网络上可达的网络设备

用python测试网络上可达的网络设备 之前使用的os在python中执行ping测试网络中可达的目标&#xff0c;但是他在执行ping命令时脚本会将系统执行ping时的回显内容显示出来&#xff0c;有时这些回显并不是必要的。如果用脚本一次性ping成百上千台网络设备或者URL时会影响美观和阅…

MySQL中的索引①——索引介绍、结构、分类、语法、SQL性能分析

目录 目录 索引概述--> 介绍---> 优缺点---> 索引结构--> ​编辑 存储引擎支持情况---> BTree---> BTree---> Hash---> Hash特点---> 思考题 索引分类--> InnoDB存储引擎中---> 聚集索引---> 二级索引---> 执行过程--…

SpringBootAdmin

SpringBootAdmin 文章目录 SpringBootAdmin创建SpringBootAdmin服务端创建SpringBootAdmin客户端启动应用 总结 github地址 https://github.com/codecentric/spring-boot-admin 可以查到所有的版本号 创建SpringBootAdmin服务端 创建springBoot项目的时候&#xff0c;在ops选项…

外贸平台获客技巧分享!(个人经历)

作为一名从事外贸行业多年的专业人士&#xff0c;我深知在竞争激烈的市场中获取客户的重要性&#xff0c;今天&#xff0c;我想与大家分享一些我在外贸平台上获客的技巧和经验&#xff0c;希望能够帮助到需要的人。 首先&#xff0c;我们需要明确一点&#xff0c;外贸平台是一…

一键抠图|3个智能AI抠图软件实现抠图自由!

听说你对如何利用AI抠图技术去除白色背景感兴趣&#xff1f;设想一下&#xff0c;你有一张某人站在白色背景前的照片&#xff0c;而你只希望能留下这个人物。在过去&#xff0c;你可能需要花费大量时间和精力手动进行抠图。但现在&#xff0c;AI技术来拯救你了&#xff01;AI可…

2024年MCM/ICM美国大学生数学建模竞赛备战指南

01 2024美赛基本要求 1.关于时间&#xff08;北京时间&#xff09; 比赛开始时间&#xff1a; 2024年2月2日6:00至 2024年2月6日9:00 提交截止时间&#xff1a;2024年2月6日10:00 结果发布时间&#xff1a;结果将于2024年5月31日或之前发布 2.关于规则 完整的解决方案现…

Redis应用-缓存

目录 什么是缓存 使用redis作为缓存 缓存的更新策略 通用的淘汰策略 redis内置的淘汰策略 缓存预热 缓存穿透 缓存雪崩 缓存击穿 什么是缓存 缓存(cache)是计算机中一个经典的概念,在很多的场景中都会涉及到. 核心思路就是把一些常用的数据放到触手可及(访问速度更快…

用OpenCV与MFC写一个图像格式转换及简单处理程序

打开不同格式的图形文件&#xff0c;彩色装灰度图像、锐化、高斯滤波、边界检测及将其存储为需求格式是图像处理的最基本的操作。如果单纯用MFC编程&#xff0c;是一个令人头痛的事情&#xff0c;有不少的代码量。可用OpenCV与MFC编程就变得相对简单。下面来详细演示这一编程操…

敏捷:应对软件定义汽车时代的开发模式变革

随着软件定义汽车典型应用场景的落地&#xff0c;汽车从交通工具转向智能移动终端的趋势愈发明显。几十年前&#xff0c;一台好车的定义主要取决于高性能的底盘操稳与动力系统&#xff1b;几年前&#xff0c;一台好车的定义主要取决于智能化系统与智能交互能否满足终端用户的用…

五肽-13|提亮肤色,美白肌肤

五肽-13 INCI名称&#xff1a;五肽-13 说明&#xff1a; 五肽-13是一种合成肽&#xff0c;由丙氨酸、精氨酸、赖氨酸、脯氨酸和缬氨酸组成 功能&#xff1a; 五肽-13起到增白剂的作用 应用程序&#xff1a; 提亮和美白

Unity渲染Stats分析

文章目录 前言一、Stats二、我们主要看渲染状态分析1、FPS2、其他状态信息3、DrawCall4、Batch5、Setpass Call6、在Unity中弱化了DrawCall的概念&#xff0c;我们主要看 Batch 和 Setpass Call 三、使用 Batching&#xff08;合批&#xff09; 降低 Batch &#xff08;渲染批次…

【c】杨辉三角

下面介绍两种方法 1.利用上面性质的第五条&#xff0c;我们可以求各行各列的组合数 2.利用上面性质的第7条&#xff0c;我们可以用数组完成 下面附上代码 1. #include<stdio.h> void fact(int n ,int m )//求组合数 {long long int sum11;long long int sum21;int a…

LTD254次升级 | 订单批打印 • 官网搭“抖音“ • 合伙人添权益

1、 商城订单支持打印功能&#xff1b; 2、 H5/小程序商城新增一款首页样式&#xff1b; 3、 社区中视频支持抖音方式浏览&#xff1b; 4、 极速官微优化管理页面布局、优化海报分享样式&#xff1b; 5、 新增一款轮播模块&#xff1b; 6、 已知问题修复与优化&#xff1b; 01 …

<sa8650>Safety Monitor 之 API介绍 (第二部分)

&#xff1c;sa8650&#xff1e;Safety Monitor 之 API介绍 4.由APSS安全监视器支持的接口4.1数据结构文件4.1.1 struct sm_handle4.1.2 struct safety_msg_initial_fault4.1.3 struct safety_msg_notify_fault 4.2 Enumeration documentation4.2.1 safety_fault_subsystem4.2…

前端:让一个div悬浮在另一个div之上

使用 CSS 的 position 属性和 z-index 属性 首先&#xff0c;将第二个 div 元素的 position 属性设为 relative 或 absolute。这样可以让该元素成为一个定位元素&#xff0c;使得后代元素可以相对于它进行定位。 然后&#xff0c;将要悬浮的 div 元素的 position 属性设为 ab…

分布式锁常见实现方案

分布式锁常见实现方案 基于 Redis 实现分布式锁 如何基于 Redis 实现一个最简易的分布式锁&#xff1f; 不论是本地锁还是分布式锁&#xff0c;核心都在于“互斥”。 在 Redis 中&#xff0c; SETNX 命令是可以帮助我们实现互斥。SETNX 即 SET if Not eXists (对应 Java 中…

Redis7--基础篇7(哨兵sentinel)

1. 关于哨兵的介绍 1、监控redis运行状态&#xff0c;包括master和slave&#xff08;主从监控&#xff09; 2、哨兵可以将故障转移的结果发送给客户端&#xff08;消息通知&#xff09; 3、当master down机&#xff0c;能自动将slave切换成新master&#xff08;故障转移&#…

软件测试理论

含义&#xff1a;使用技术手段来验证软件是否满足使用需求 目的&#xff1a;减少软件缺陷&#xff0c;保障软件质量 单元测试&#xff1a;对模块/函数进行的测试 集成测试&#xff1a;把多个模块/函数组装到一起进行的测试 系统测试&#xff1a;计算机程序结合外设网络等其…

springboot077基于SpringBoot的汽车票网上预订系统

springboot077基于SpringBoot的汽车票网上预订系统 成品项目已经更新&#xff01;同学们可以打开链接查看&#xff01;需要定做的及时联系我&#xff01;专业团队定做&#xff01;全程包售后&#xff01; 2000套项目视频链接&#xff1a;https://pan.baidu.com/s/1N4L3zMQ9n…

流量异常-挂马造成百度收录异常关键词之解决方案(虚拟主机)

一.异常现象&#xff1a;流量突然暴涨&#xff0c;达到平时流量几倍乃至几十倍&#xff0c;大多数情况下因流量超标网站被停止。 二.排查原因&#xff1a; 1.首先分析web日志&#xff1a;访问量明显的成倍、几十倍的增加&#xff1b;访问页面不同&#xff1b;访问IP分散并不固…