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. 2-SAT问题的小结

    简介 什么是2-SAT呢?就是有一些集合,每个集合中有且仅有两个元素,且不能同时选取两个元素,集合间的元素存在一定的选择关系,求解可行性及可行方案. 算法 1.连边 2.跑tarjan 3.判可行性, ...

  2. jemter模拟高并发访问(亲测ok)

    https://blog.csdn.net/a574258039/article/details/19549407

  3. 腾讯云CDN python SDK

    腾讯云CDN python SDK 博主在开发时偶尔要用到CDN,感觉适合学生党的应该是腾讯云的CDN了,还提供了每月10G的流量,博主平时学习使用已经足够了. 代码 #coding=utf-8 fr ...

  4. Spring Boot使用Druid连接池基本配置

    以下为Spring Boot配置Druid 一.pom.xml配置 <dependency> <groupId>com.alibaba</groupId> < ...

  5. 【二维树状数组】计数问题 @JSOI2009/upcexam5911

    时间限制: 1 Sec 内存限制: 128 MB 题目描述 一个n*m的方格,初始时每个格子有一个整数权值.接下来每次有2种操作: 改变一个格子的权值: 求一个子矩阵中某种特定权值出现的个数. 输入 ...

  6. CentOS使用Ubuntu的start-stop-daemon来启动守护进程

    在CentOS下使用守护进程启动有/etc/init.d/functions文件下的daemon方法,但如果要使用Ubuntu下的start-stop-daemon方法也可以实现. 安装如下: # 下 ...

  7. 让你的app在iPhoneX中全屏显示

    如果你的项目什么也不修改,直接把你的app运行在 iPhone X 模拟器下,很有可能就会出现下面的情形: 上下都有黑边,没有全屏显示 为了让app能够全屏显示,你需要准备以下的内容 Xcode 9. ...

  8. ChartControl控件0和null的效果

    DevExpress的ChartControl虽然还不能完全代替Office图表(例如它暂时不支持添加数据表),但它算同类产品中相当优秀的了,下面是对0值和空值的处理. DataTable zeroD ...

  9. 小程序学习笔记三:页面文件详解之视图层WXML、WXS、WXSS文件

      视图层:Pages主要有 wxml页面文件和模板文件.wxs脚本文件.wxss样式文件:component是抽取出来的业务单元,同样拥有wxml页面文件和模板文件.wxs脚本文件.wxss样式文件 ...

  10. PL/SQL学习笔记之包

    一:包 包是由一组相关的函数,过程,变量,游标等PL/SQL程序设计元素的组合而成的一个PL/SQL程序单元,相当于Java中的类. 包的主要作用是封装:把相同或相似的东西归类,方便维护和管理,提高开 ...