js根据文字（保存大小，字体）计算文字长度，并根据容器显示省略号

需求：根据容器大小判断是否显示省略号容器与文本都是随机变化
问题：由于需求与技术限制，不能使用下面这种方法

>  /* 强制不换行 */white-space: nowrap;/* 文字用省略号代替超出的部分 */text-overflow: ellipsis;/* 匀速溢出内容，隐藏 */overflow: hidden;

、

由此根据容器宽度和计算文本宽度来实现

//name 为要显示的文字
//titleWidth 为计算文本的宽度 传入文本 文本大小 文本字体 可动态变化
//width为容器大小 可动态变化var namelet titleWidth=this.computeFontSize(str,text.fontSize, text.fontFamily).widthif(titleWidth > width) {//计算每个字的平均宽度let len = titleWidth / str.split('').lengthlet num//这两种字体偏小，所以比其他字体多取一位 仿宋 微软雅黑if ((text&&text.fontFamily == 'STFangsong') || (text&&text.fontFamily == 'Microsoft YaHei')) {//根据每个字的平均宽度计算超出容器有几个字,减掉加省略号num = Math.ceil((titleWidth - width) / len)+1} else {num = Math.ceil((titleWidth - width) / len)+2}let nameTitle=str.split('').slice(0,str.split('').length-num).join('')+'...'name = nameTitle;} else {name=str}

computeFontSize(str, size, family) {let spanDom = document.createElement("span");spanDom.style.fontSize = size+'px'; //12pxspanDom.style.fontFamily = family; //'STFangsong'spanDom.innerHTML = str;document.body.append(spanDom);let sizeD = {};sizeD.width = spanDom.offsetWidth;spanDom.remove();return sizeD;
}

js根据文字（保存大小，字体）计算文字长度，并根据容器显示省略号相关推荐

0108-－/** * 根据最大尺寸和字体计算文字的实际尺寸 */
.h #import <UIKit/UIKit.h> @interface NSString (Extension) /** * 根据最大尺寸和字体计算文字的实际尺寸 */ - (CGS ...
html 文字过多如何显示,当页面文字过多时，怎么用css使超出部分显示省略号？（单/多行代码演示）...
当一个页面文字过于冗长时,不仅不利于用户视觉上的感受,更不利于网站内的优化.那么我们怎么使用css超出部分显示省略号代替呢?本篇文章就给大家详细介绍css超出部分显示省略号怎么实现的?希望对有需要的朋 ...
doc python 字体颜色,Python docx修改文字大小字体类型 Python-docx 实现整体修改或者部分修改文字的大小和字体类型...
想了解Python-docx 实现整体修改或者部分修改文字的大小和字体类型的相关内容吗,Leeoo_lyq在本文为您仔细讲解Python docx修改文字大小字体类型的相关知识和一些Code实例,欢迎 ...
linux文字大小,Qt 字体大小的计算
在QFont当中有两种方式设置字体大小,一种是PixelSize,另一种是PointSize Point实际是磅,也就是 1/72 inch 我们可以从PainterDevice中得到当前DPI(Do ...
python怎么改变字体大小_Python-docx 整体修改或者部分修改文字的大小和字体类型...
Python中可以用docx来生成word文档,docx中可以自定义文字的大小和字体等. 其中要整体修改文字的字体大小和字体,可以用以下方法: newfile = docx.Document() ne ...
android 设置Spinner文字标题颜色字体大小样式
原文地址为: android 设置Spinner文字标题颜色字体大小样式 // 在初始化之前改变 Spinner文字标题颜色 mySpinner.xml 样式文件放在main.xml ...
计算机考试怎么调整字号,WPS文字如何调节字体大小突破字号72的限制实现大小随意调...
熟练掌握WPS是职称计算机考试基本要求,猎学网为考生分享WPS教程:""WPS文字如何调节字体大小突破字号72的限制实现大小随意调""内容,帮助考生备考职称计算 ...
Markdown更改字体、颜色、大小，设置文字背景色，调整图片大小设置居中，插入表格等方法
Markdown更改字体.颜色.大小,设置文字背景色,调整图片大小设置居中,插入表格等方法 Markdown 通过简单标记语法,使普通文本内容具有一定格式.但它本身不支持修改字体.字号与颜色等功能的. ...
android studio app字体大小设置,Android Studio App设置TextView文字内容大小颜色
设置TextView文字内容大小颜色 1.第一种方法在activity_main.xml李设置,Java文件不用改: android:text="这里是文字" android:te ...

js根据文字（保存大小，字体）计算文字长度，并根据容器显示省略号

js根据文字（保存大小，字体）计算文字长度，并根据容器显示省略号相关推荐

最新文章

热门文章