javascript实现一行文字随不同设备自适应改变字体大小至字数完全展示
产品提了一个小需求,希望一行能展示用户输入的所有文字,因为最多限制为25字符,但是如果夹杂英文/韩文/日文等,即使字符数是一样的,但是展示的长度不一样,则有些title标题会被截断。
效果如图
前提是总字数有一个差不多展示一行的最大限制,否则文字太小,也不能保证正常展示。
.lineClamp {
overflow: hidden !important;
text-overflow: ellipsis !important;
-webkit-line-clamp:;
display: -webkit-box;
-webkit-box-orient: vertical;
white-space: normal;
}
<div id="titleBox">
<div class="title" id="title">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈
</div>
</div>
//title字体大小自适应,以能完全在一行显示25个不同类型的字符。
function fontAuto() {
let titleBox = document.getElementById("titleBox");
let title=document.getElementById("title");
let size=4;
title.style.fontSize = size + 'vw';
let scrollWidth=title.scrollWidth;
while (title.scrollWidth > document.getElementById("titleBox").offsetWidth) {
scrollWidth=title.scrollWidth;
//当容器高度大于最大高度的时候,上一个尝试的值就是最佳大小。
size=size-0.2;
title.style.fontSize = size+ 'vw';
if(scrollWidth<=title.scrollWidth){
$("#title").addClass("lineClamp1");
$("#title").removeClass("toh");
break;
}
}
}
fontAuto();
思路:由于不同移动设备的分辨率不同,这里给font-size用的单位为vw,默认设置一个当前字体的font-size,获取到文字外层容器的宽度,判断文字的宽度是否大于容器的宽度,如果大于,则给当前的font-size减小0.1vw,如果px同理,可以按减小1px计算,然后成功,如果在一些小屏幕设备上,字体小到一定大小达到极限,不会继续减小,则始终跳不出循环,这时加一个class,让文字最后显示三个点。
注意:由于是单行文本,超出缩小字体到不能缩小的时候显示三个点,所以要默认给该行元素加一个class
.line_nowrap{
white-space:nowrap;
},
限定文本不换行,当字体缩小到一定大小,不能再缩小,依然超出的时候,添加 .lineClamp1 class,增加三个点,但此时由于加了不换行的属性,三个点是不能展示的,这时候还需要去掉不换行class.
这里有个疑问,亲测发现
Size减小的同时,size所在的div和size外层的div都会减小,所以这里用了
document.getElementById("titleBox").offsetWidth
来获取最新的文字所在的盒子宽度。
javascript实现一行文字随不同设备自适应改变字体大小至字数完全展示的更多相关文章
- javascript实现限定高度下文字随不同设备自适应改变字体大小至字数完全展示
function fontAutoMoreLine() { let textBox = document.getElementById("iconTxt"); let maxHei ...
- 改变字体大小实现自适应之js方案A
一.元素大小有两种写法 1.写结果:设计师给的移动端页面sketch设计稿一般是750px宽度,在sublime编辑器里,设置cssrem或rem-unit插件为56px的字体大小.做页面时,设计稿是 ...
- rem布局和使用js rem动态改变字体大小,自适应
解决rem文字动态改变字体大小: <script> console.log(window.devicePixelRatio); var iScale = 1; iScale = iScal ...
- javascript动画系列第四篇——拖拽改变元素大小
× 目录 [1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化 前面的话 拖拽可以让元素移动,也可以改变元素大小.本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动,是改变定位 ...
- delphi 程序窗体及控件自适应分辨率(通过ComponentCount遍历改变字体大小以及上下左右)
unit untFixForm; interface uses Classes, SysUtils, Controls, Forms; type TFontedControl = class(TCon ...
- 使用js rem动态改变字体大小,自适应
<html> <head> <meta charset="utf-8"> <script> console.log(window.d ...
- JavaScript动画-拖拽改变元素大小
▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...
- 如何调整chm文字字体大小
chm文档是使用用层叠样式表来控制字符大小的,通过IE的改变“文字大小”是没效果的,那我们是不是就没有办法改变它的大小了呢?显然不是的. 工具/原料 chm文件 方法/步骤 首先打开chm ...
- 如何利用rem在移动端不同设备上让字体自适应大小
本人也是一个刚刚接触前端的小虾米,对于移动端这一块更是一抹眼的黑,前端时间接手开始一个移动端的项目,在网上查询了一下rem的作用,百度搜索下来全是介绍rem的作用原理的(rem是根据根元素计算的),然 ...
随机推荐
- 20172302《程序设计与数据结构》实验四Android程序设计实验报告
课程:<程序设计与数据结构> 班级: 1723 姓名: 侯泽洋 学号:20172302 实验教师:王志强老师 实验日期:2018年5月30日 必修/选修: 必修 1.实验内容 (1)And ...
- 在eclipse总是会运行之前的错误项目
我改了context root没有用,删了work下面的项目文件也没有用,最后必须要改server的配置,就是在windows下有个server runtimeEnvironment http://b ...
- unity操作Hierarchy视图下同名的对象
上周遇到了一个令我尴尬的问题,在同一个场景内有了两个名字相同的对象,给个形象化的栗子: 场景内有橱窗,橱窗是模型,窗户是可以打开的[点击控制],窗户可以控制打开和关闭的.然后我就选用了一个保守的方式进 ...
- Asp.Net Mvc项目初始化说明
文件夹说明: App_Start 项目的启动配置 Content css以及图片资源存放位置 Controllers.Models.View控制器.模型.视图存放位置 Scripts js以及js插件 ...
- JSON序列——主从表查询
JSON序列——主从表查询 客户端代码: procedure TForm1.Button4Click(Sender: TObject); // 主从表 查询 begin var url: TynUrl ...
- 关于产品UE的胡思乱想
1.产品的目标是 取悦 用户 不能只盯着功能实现,而不考虑用户使用. 我们的目标不应该不过让用户使用我们的产品.而是让用户在使用我们产品过程中感到 "愉悦". 2.用户是SB 3 ...
- python 进程池pool简单使用
平常会经常用到多进程,可以用进程池pool来进行自动控制进程,下面介绍一下pool的简单使用. 需要主动是,在Windows上要想使用进程模块,就必须把有关进程的代码写if __name__ == ‘ ...
- python eric6 IDE
之前开发一直使用sublime text + anaconda, 无意中发现了eric, Python主流IDE对比:Eric VS. PyCharm 使用IDE绝对是能提高开发效率的... http ...
- oracle decode()函数的参数原来可以为sql语句!
1.情景展示 判断某个字段的值,如果以APP开头,需查询APP表里对应的数据:如果是以JG开头,就查询机构对应的表. 2.原因分析 如果使用CASE WHEN THEN或者IF ELSIF 太麻烦 ...
- MVC项目实践,在三层架构下实现SportsStore-11,使用Knockout实现增删改查
SportsStore是<精通ASP.NET MVC3框架(第三版)>中演示的MVC项目,在该项目中涵盖了MVC的众多方面,包括:使用DI容器.URL优化.导航.分页.购物车.订单.产品管 ...