/**
* 根据指定宽度截取字符串
* @param desc 原始字符串
* @param width 该显示的宽度
* @param fontsize 字体大小 12px
* @returns {string} 截取后的字符串
*/
export function getStrByWith (desc, width, fontsize) {
var span = document.createElement('span')
span.id = 'cut'
span.style.visibility = 'hidden'
span.style.fontSize = fontsize
span.style.whiteSpace = 'nowrap'
document.body.appendChild(span)
var boo = false
var temp = '' // 存放截断字符串
for (var j = 0; j < desc.length; j++) {
// desc是目标字符串,
temp += desc[j]
span.innerText = temp
if (span.offsetWidth > width) {
boo = true
break
}
}
document.body.removeChild(span)
if (boo) temp += '..'
return temp
}

[JavaScript] 根据指定宽度截取字符串的更多相关文章

  1. [JavaScript] 根据字符串宽度截取字符串

    /** * 根据字符串宽度截取字符串 * @param desc 原始字符串 * @param width 该显示的宽度 * @param fontsize 字体大小 12px * @returns ...

  2. javascript 高效按字节截取字符串

    做为一个前端开发人员在网页展示中经常会碰到,标题过长,需要截取字符串,用CSS的实现的话各种兼容问题,各种坑. 让后台程序截一下,又各种推托,让后台按字节截一下更是和要了后台老命一样,最后可能只会安字 ...

  3. Android(Java) 字符串的常用操作,获取指定字符出现的次数,根据指定字符截取字符串

    /*这是第100000份数据,要截取出100000*/ String s="这是第100000份数据"; String s1 = s.substring(s.indexOf(&qu ...

  4. JavaScript:在JS中截取字符串的方法

    这篇主要说一说截取字符串的方法,用于帮助自己缕清方法的作用,参数的意义,返回值,是否对于原来的字符串进行了操作等. 在javascript中,常见的截取字符串的方法有slice().substring ...

  5. JavaScript进阶(七)JS截取字符串substr 和 substring方法的区别

    JS截取字符串substr 和 substring方法的区别 substr方法 返回一个从指定位置开始的指定长度的子字符串. stringvar.substr(start [, length ]) 参 ...

  6. C#指定长度截取字符串 并进行拼接。

    需求:有一个字符串需要按照指定长度拆分出来,然后在增加一个字符串拼接上. /// <summary> /// 字符串截取并拼接 /// </summary> /// <p ...

  7. python按照指定字符或者长度 截取字符串

    1.截取指定位置字符串 Python字符串可以理解为一个数组,获取某一部分的可以使用 str[beginIndex:endPosition],其中str为需要截取的字符串,beginIndex为需要截 ...

  8. 步步为营-104-SQL语句(截取字符串)

    按照指定字符截取字符串,截取出300 业务需求:想比对图片中框线部分是否一致 第一步 从最后一个/截取到末尾 select top 1 reverse(substring(reverse(Proces ...

  9. php截取字符串|php截取字符串前几位|php截取中文字符串

    转 截取字符串专题:php截取字符串函数,php 字符串长度,php截取字符串前几位 PHP截取中文字符串(mb_substr)和获取中文 => http://www.q3060.com/lis ...

随机推荐

  1. Visual Studio 2015部署OpenCV

    Visual Studio 2015的安装破解及OpenCV的安装和部署 平台:win10 X64+VS2015专业版 X64:vs2015.pro_chs+OpenCV 3.X:opencv-3.4 ...

  2. hdu-1036(格式题+精确度)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1036 心得:注意,要进行四舍五入的精确可以用+0.5实现. #include<iostream& ...

  3. linux yum 本地源配置

    1.查看硬盘情况 lsblk sr0就是光驱了 2.执行挂载命令 查看光驱cd /devls 执行命令 mount /dev/sr0  /mnt 将光驱挂载到 /mnt 目录 这样光驱就挂载好了 2. ...

  4. MFC调试时无法解析外部类

    1.是否添加头文件 2.是否对类进行声明

  5. identify.class.php<======>token加密方法

    class Identify { static private $cert = "1111111"; static public function writeSecret($mob ...

  6. s4-5 以太网帧

    以太网所处的层次 IEEE 802.3/以太网MAC子层协议  IEEE802.3协议描述了运行在各种介质上1 Mb/s~10 Mb/s的1- 持续CSMA/CD协议的局域网标准.  很多人对以太 ...

  7. 第32章:MongoDB-索引--Capped固定集合

    ①Capped集合(固定集合) Capped集合的大小固定,性能好,如果空间用完了,新的对象会覆盖旧的对象. find时默认就是插入的顺序,Capped集合会自动维护. ②语法 db.createCo ...

  8. Location对象的查询字符方法实现

    function getQueryStringArgs(){ /*如果location.search有则删除第一个字符,并返回删除后的字符串*/ var gs = (location.search.l ...

  9. c++中指针的指针和指针的引用的使用

    当指针作为函数的参数进行传递时,实际上本质上是安置传递,即将指针进行了一份拷贝,在函数的内部对这个指针的修改实际上就是对一个在函数内部的那个局部变量的修改.这点事和引用不同的,引用实际上是在参数传递时 ...

  10. head内部标签(常用部分)

    1.meta标签: <meta charset="utf-8" /> 2 <meta name="keywords" content=&quo ...