元素宽度固定，根据字符串长度，计算fontSize，缩小字号适配页面

<!doctype html>

<html>

<head>

<title>动态获取fontSize</title>

.box {

width: 70px;

background: #222222;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

color: #ffffff;

font-size: 100px;

}

</style>

</head>

window.onload = function() {

let box = document.getElementById('box')

function getFontSize(str = '666,666.66', targetSize = 20) {

let boxWith = box.offsetWidth;

let fontSize = targetSize;

let theCanvas = null;

let practicalWidth = getWidth(str, fontSize)

function getWidth(text, size) { // 使用canvas计算字符串展示所需宽度

let font = `normal ${size}px Microsoft YaHei`

const canvas = theCanvas || (theCanvas = document.createElement('canvas'));

const context = canvas.getContext('2d');

context.font = font;

return Math.floor(context.measureText(text).width)

}

while ((10 <= fontSize) && (practicalWidth > boxWith)) { // 所需宽度小于实际宽度，或者计算字体大于最小字体10

fontSize -= 2

practicalWidth = getWidth(str, fontSize); // 重新计算目标字符串所需宽度

boxWith = box.offsetWidth - getWidth('...', fontSize); // 文本溢出剔除...所占距离

if (practicalWidth< boxWith) {

break

}

return fontSize; // 输出fontSize

}

box.style.fontSize = `${getFontSize()}px`

}

</script>

<body>

</body>

</html>

元素宽度固定，根据字符串长度，计算fontSize，缩小字号适配页面相关推荐

c mysql 返回字符串长度_objective-c中字符串长度计算
我们知道,在c语言中,使用sizeof ()计算在内存中占用的字节数, 引用string.h后,使用strlen()计算字符串的长度(不包含\0). 而在object-c中, "length ...
实用Python之字符串长度计算
实用Python之字符串长度计算 ** 相信在很多时候,大家都会遇到一些字符串的处理,比如你想知道一个常常的字符串到底有多长.很多人可能想到的第一想法就是把这个字符串写入到工程项目中,然后Log打印 ...
在线字符串长度计算，字符串统计工具
在线字符串长度计算,字符串统计工具在线字符串长度计算,字符串统计工具本工具支持统计给定的字符串的总数,中文总数,英文总数,符号总数和数字总数等数据. 客户端实时计算,数据实时更新. https:/ ...
C++常用字符串长度计算函数
字符串的长度通常是指字符串中包含字符的数目,但有的时候人们需要的是字符串所占字节的数目.常见的获取字符串长度的方法包括如下几种. 1.使用sizeof获取字符串长度sizeof的含义很明确,它 ...
C++ 字符串长度计算
C++常用的长度计算方法size().sizeof() .strlen().length() size():计算长度,std::string类的成员函数 length():计算长度,std::stri ...
C语言字符串长度计算
在C语言的应用过程中经常性的会用到字符串,以及对字符串的长度进行计算的问题. 首先大家常用的办法是使用strlen函数和sizeof关键字进行设计. sizeof()返回字节数,strlen()返回的 ...
字符串长度计算（包含中文）
public static int lengthWithCh(String value) {int valueLength = 0;String chinese = "[\u0391-\uF ...
java字符串长度计算，论程序员成长的正确姿势
第一篇Linux基础学习篇目录第零章﹑计算机概论关于电脑的硬件组成部分﹐其实你可以观察你的台式机来分析一下﹐依外观来说这家伙主要可分为三部分﹐分别是∶ 输入单元∶包括键盘﹑鼠标﹑读卡机﹑扫描仪﹑手 ...
java 月份适配计算_js+rem动态计算font-size的大小适配各种手机设备
需求:在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案:使用js动态改变html的字体大小font-size+rem的特性,来保证最初的设计图中每个元素的尺寸比例不变,以适用于不同尺寸的设备 ...

元素宽度固定，根据字符串长度，计算fontSize，缩小字号适配页面

元素宽度固定，根据字符串长度，计算fontSize，缩小字号适配页面相关推荐

最新文章

热门文章