/**
* 根据指定宽度截取字符串
* @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. php中如何配置项目虚拟路径

    php虚拟目录的设置在apache目录下打开conf->httpd.conf文件,找到<IfModule dir_module>,在</IfModule>后面添加如下代码 ...

  2. 基础知识之nginx重写规则

    nginx重写规则 nginx rewrite 正则表达式匹配 大小写匹配 ~ 为区分大小写匹配 ~* 为不区分大小写匹配 !~和!~*分别为区分大小写不匹配及不区分大小写不匹配 文件及目录匹配 -f ...

  3. 2018.06.27Dual Core CPU(最小割)

    Dual Core CPU Time Limit: 15000MS Memory Limit: 131072K Total Submissions: 26136 Accepted: 11270 Cas ...

  4. SimpleDateFormat转换时间,12,24时间格式[转]

    SimpleDateFormat转换时间,12,24时间格式 来自:http://blog.csdn.net/dongguang1082/article/details/4387165 在使用Simp ...

  5. flex布局中的主轴和侧轴的确定

    1.主轴和侧轴是通过flex-direction确定的 如果flex-direction是row或者row-reverse,那么主轴就是justify-contain 如果flex-direction ...

  6. springboot实现xml传参和返回值

    1.新建maven工程xml-bean-convert pom.xml如下 <?xml version="1.0" encoding="UTF-8"?&g ...

  7. java Concurrent包学习笔记(五):Semaphore

    一.Semaphore 是什么  信号量Semaphore是一个并发工具类,用来控制可同时并发的线程数,其内部维护了一组虚拟许可,构造函数初始化的时候可以指定许可的总数量 每次线程执行操作时先通过ac ...

  8. 实习番外篇:解决C语言使用Makefile无法实现更好的持续集成问题

    工作中遇见的一个问题,提供项目源代码的情况下,希望对项目进行持续集成,达到一个C项目增量编译的效果.原本第一天是想通过模拟Makefile执行步骤来实现整个过程的,但是事实上发现整个Makefile显 ...

  9. css 兼容ie8 rgba()用法

    今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到 ...

  10. IP之ALTIOBUF仿真

    这里实现了差分转单端的功能. 问题:差分信号的电平是怎样的?如果像平常一样不设置Pin Planner中的电平的话,编译会报错. 在Pin Planner中做了如下设置: `timescale 1 n ...