javascript实现限定高度下文字随不同设备自适应改变字体大小至字数完全展示
function fontAutoMoreLine() {
let textBox = document.getElementById("iconTxt");
let maxHeight = textBox.offsetHeight;
let title = document.getElementById("iconTitle");
let size = 5;
title.style.fontSize = size + 'vw';
let scrollHeight=title. scrollHeight;
while (title.scrollHeight > maxHeight) {
scrollHeight=title. scrollHeight;
//当容器高度大于最大高度的时候,上一个尝试的值就是最佳大小。
size = size - 0.2;
title.style.fontSize = size + 'vw';
if(scrollHeight<=title.scrollHeight){
$("#iconTitle").addClass("lineClamp");
break;
}
}
}
fontAutoMoreLine();
<div class="iconTxt" id="iconTxt">
<div class="iconTitle" id="iconTitle">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</div>
.iconTitle{font-weight:;font-size:6vw;line-height: 8vw;}
.iconTxt{height:16vw;overflow: hidden;}
.lineClamp {
overflow: hidden !important;
text-overflow: ellipsis !important;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
white-space: normal;
}
效果如图:


单行文字自适应实现看这里
javascript实现限定高度下文字随不同设备自适应改变字体大小至字数完全展示的更多相关文章
- javascript实现一行文字随不同设备自适应改变字体大小至字数完全展示
产品提了一个小需求,希望一行能展示用户输入的所有文字,因为最多限制为25字符,但是如果夹杂英文/韩文/日文等,即使字符数是一样的,但是展示的长度不一样,则有些title标题会被截断. 效果如图 前提是 ...
- JavaScript动画-拖拽改变元素大小
▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...
- 如何调整chm文字字体大小
chm文档是使用用层叠样式表来控制字符大小的,通过IE的改变“文字大小”是没效果的,那我们是不是就没有办法改变它的大小了呢?显然不是的. 工具/原料 chm文件 方法/步骤 首先打开chm ...
- JavaScript 面向对象程序设计(下)——继承与多态 【转】
JavaScript 面向对象程序设计(下)--继承与多态 前面我们讨论了如何在 JavaScript 语言中实现对私有实例成员.公有实例成员.私有静态成员.公有静态成员和静态类的封装.这次我们来讨论 ...
- UILabel 的高度根据文字内容调整
1.UILabel 对文字的自适应有两种方法. 1)将label的numberOfLines设为0;并添加自适应方法[titleLabel sizeToFit],但是这种方法并不理想. 2)根据文字的 ...
- IE6 IE7下文字显示竖排的解决办法
IE下文字显示竖排的解决办法: white-space:nowrap;
- JavaScript 多级联动浮动(下拉)菜单 (第二版)
JavaScript 多级联动浮动(下拉)菜单 (第二版) 上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...
- 第一百三十二节,JavaScript,封装库--下拉菜单
JavaScript,封装库--下拉菜单 封装库,增加了3个方法 shu_biao_yi_ru_yi_chu()方法,给元素设置鼠标移入移出事件,接收两个参数,参数是移入和移出时的执行函数(包含代码) ...
- textarea高度跟随文字高度而变化
html部分: <textarea id="textarea">哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽</textarea> js部分: < ...
随机推荐
- BZOJ3022 : [Balkan2012]The Best Teams
将选手和询问按照年龄排序,即可去掉年龄的限制. 将所有选手按水平排序后维护线段树,显然最优解一定是从大到小贪心选择. 线段树上每个节点维护: $g[0/1]:r+1$不选/选的时候,$l$选不选. $ ...
- 近年NOIP考点与主要做法
- tarjan求双联通分量(割点,割边)
之前一直对tarjan算法的这几种不同应用比较混淆...我太弱啦! 被BLO暴虐滚过来 用tarjan求点双,很多神犇都给出了比较详细的解释和证明,在这里就不讲了(其实是这只蒟蒻根本不会orz) 这里 ...
- css中px,em,rem,rpx的区别
今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...
- Java集合框架(比较啰嗦)
阅读目录 概念与作用 集合框架的体系结构 Collection接口和List接口简介 Map和HashMap简介 集合工具类:Collections 小结 概念与作用 集合概念 现实生活中:很多事物凑 ...
- 小甲鱼Python第九讲课后习题--010列表
0.列表都可以存放一些什么东西? 可以存放任何的数据类型 1. 向列表增加元素有哪些方法? append()--末尾添加一个元素 extend()--末尾添加多个元素,但要求已列表的格式添加[x,x, ...
- 【高精度】高精度分数[c++]
[高精度]高精度分数 时间限制: 1 Sec 内存限制: 64 MB 题目描述 "人无远虑,必有近忧"是修罗王一直以来恪守的信条,为了以防万一,他在很久以前就将<魔法宝典&g ...
- django之session与分页
前面我们介绍了cookies,主要应用在用户登录上,保存用户登录状态,不过cookies直接放在了浏览器上,安全性较低,所以我们便引出了session功能与cookies相同,不同的是它放在了客户端, ...
- C# 实现Remoting双向通信
本篇文章主要介绍了C# 实现Remoting双向通信,.Net Remoting 是由客户端通过Remoting,访问通道以获得服务端对象,再通过代理解析为客户端对象来实现通信的 闲来无事想玩玩双向通 ...
- 11、TopN实战
1.Java版本: 1.1.取前3 package sparkcore.java; import java.util.List; import org.apache.spark.SparkConf; ...