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部分: < ...
随机推荐
- Linux命令行使用
FHS:标准文件架构规范用好man命令su - name 切换到用户namesu - rootchmod 777 filenamecd -:上一个工作目录cd ~:用户的家目录cd ~nid:q切换到 ...
- Python中将array类型不按科学计数法存在文件中的方法
直接上代码: from numpy import *import numpy as npDrug_array = zeros((708,708),dtype = int)f = open('D:\ma ...
- JAVA自学笔记18
JAVA自学笔记18 1.Map接口: 1)功能: 2) Map<String,String>m=new HashMap<String,String>(); //添加元素,元素 ...
- 9、js扩展
作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理. 本片导航: js的作用域 作用域链(Scope Chain) 一. ...
- Mac 10.12下安装python3环境
python3感觉用虚拟环境会比较好操作一些,也不用直接卸载python2. 一.基于brew快速安装 # 安装python3 brew install python3 # 安装pip(好像3自带pi ...
- MySql的优化步骤
MySql优化的一般步骤: 1.通过show status 命令了解各种sql的执行效率 SHOW STATUS提供msyql服务器的状态信息 一般情况下,我们只需要了解以”Com”开头的指令 sho ...
- 咏南ISAPI中间件
咏南ISAPI中间件 只支持WINDOWS服务器部署,中间件作为IIS的ISAPI插件部署. 基于WINDOWS的IIS,使用HTTP.SYS通讯,不依赖任何三方控件. 可以基于IIS HTTPS. ...
- mac的vscode配置使用zsh
配置文件 "terminal.integrated.shell.osx": "zsh"
- Mybatis中使用集合、数组
一.简述 本文讲Mybatis中如何将传入参数为数组或者集合对象,进行遍历,组合Where条件中如in条件等内容. 有3种情况: 如果传入的是单参数且参数类型是一个List的时候,collection ...
- Fiddler抓包_重定向AutoResponder
1. 文件及图片替换(Enable rules) 目的:允许从本地返回文件,代替服务器响应,而不用将文件发布到服务器[可用正式环境验证本地文件] 步骤一:抓页面http://ir.baidu.com/ ...