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实现限定高度下文字随不同设备自适应改变字体大小至字数完全展示的更多相关文章

  1. javascript实现一行文字随不同设备自适应改变字体大小至字数完全展示

    产品提了一个小需求,希望一行能展示用户输入的所有文字,因为最多限制为25字符,但是如果夹杂英文/韩文/日文等,即使字符数是一样的,但是展示的长度不一样,则有些title标题会被截断. 效果如图 前提是 ...

  2. JavaScript动画-拖拽改变元素大小

    ▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...

  3. 如何调整chm文字字体大小

    chm文档是使用用层叠样式表来控制字符大小的,通过IE的改变“文字大小”是没效果的,那我们是不是就没有办法改变它的大小了呢?显然不是的. 工具/原料   chm文件 方法/步骤     首先打开chm ...

  4. JavaScript 面向对象程序设计(下)——继承与多态 【转】

    JavaScript 面向对象程序设计(下)--继承与多态 前面我们讨论了如何在 JavaScript 语言中实现对私有实例成员.公有实例成员.私有静态成员.公有静态成员和静态类的封装.这次我们来讨论 ...

  5. UILabel 的高度根据文字内容调整

    1.UILabel 对文字的自适应有两种方法. 1)将label的numberOfLines设为0;并添加自适应方法[titleLabel sizeToFit],但是这种方法并不理想. 2)根据文字的 ...

  6. IE6 IE7下文字显示竖排的解决办法

    IE下文字显示竖排的解决办法: white-space:nowrap;

  7. JavaScript 多级联动浮动(下拉)菜单 (第二版)

    JavaScript 多级联动浮动(下拉)菜单 (第二版)   上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...

  8. 第一百三十二节,JavaScript,封装库--下拉菜单

    JavaScript,封装库--下拉菜单 封装库,增加了3个方法 shu_biao_yi_ru_yi_chu()方法,给元素设置鼠标移入移出事件,接收两个参数,参数是移入和移出时的执行函数(包含代码) ...

  9. textarea高度跟随文字高度而变化

    html部分: <textarea id="textarea">哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽</textarea> js部分: < ...

随机推荐

  1. java多态的向上转型与向下转型(与编译时类型与运行时类型有关)

    1.编译时类型由声明该变量时使用的类型决定,运行时类型由实际赋给该变量的对象决定. 当编译时类型和运行时类型不一致时,就会出现所谓的多态. 因为子类是一个特殊的父类,因此java允许把一个子类对象直接 ...

  2. 最长公共子序列-LCS问题 (LCS与LIS在特殊条件下的转换) [洛谷1439]

    题目描述 给出1-n的两个排列P1和P2,求它们的最长公共子序列. 输入 第一行是一个数n, 接下来两行,每行为n个数,为自然数1-n的一个排列. 输出 一个数,即最长公共子序列的长度 输入样例 5 ...

  3. Android Studio 解决ADB检测不到手机导致无法连接的问题

    ADB的全称是Android Debug Bridge,是用来管理模拟器和真机的通用调试工具. 开USB调试 方法:手机设置 - 开发人员选项 - USB调试 - 勾选(开发者调试被隐藏了,在关于手机 ...

  4. python控制流

    1. if...elif...else: 语法: if 判断条件: 语句... elif 判断条件: 语句... else: 语句... #elif语句可以有0个或多个 2. while和for循环: ...

  5. Python Mongodb接口

    Python Mongodb接口 MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. 同时,MongoDB 是一个介于关系 ...

  6. Python 列表改为嵌套列表再转为矩阵

    最终目的--------->[下面的形式我就可以直接转为矩阵,用mat即可] 下午为了实现list的这个功能,查找了好多库,但是都没有找到怎么做,索性就自己封装了一个函数实现了其功能: def ...

  7. react-navigation 中的多tabs嵌套时内部tabs无法正常切换问题

    原因 问题应该是当用户滑动或切换时,无法判断是哪个tabs应该进行滑动切换和展示切换动画. 解决 swipeEnabled - 是否允许在标签之间进行滑动 animationEnabled - 是否在 ...

  8. 多重背包--java

    多重背包 有N种物品和一个容量为V的背包.第i种物品最多有n[i]件可用,每件费用是c[i],价值 是w[i].求解将哪些物品装入背包可使这些物品的费用总和不超过背包容量,且价值总和最大母函数的思想也 ...

  9. weblogic 内存配置

    修改weblogic 使用内存 修改位置:startWeblogic.sh 在最开头增加使用内存配置信息如下: 我的服务器配置 内存:32G   ,CPU:16  根据实际情况配置 #!/bin/sh ...

  10. RAID各种级别详细介绍

    独立硬盘冗余阵列(RAID, Redundant Array of Independent Disks),旧称廉价磁盘冗余阵列(RAID, Redundant Array of Inexpensive ...