网站收录低,广告设计与制作图片大全,海南省住房城乡建设厅网站,食品包装设计调研报告最近遇到一个需求是要在第二行的中间截取文本#xff0c;因为在后面得贴一个图标#xff0c;所以这种情况用常规的css截取文本有点难处理。于是在上网查阅后发现了几个方法#xff1a;第一种是用伪元素加定位#xff0c;把.#xff1b;11..盖在文字的上面#xff1b;第二…最近遇到一个需求是要在第二行的中间截取文本因为在后面得贴一个图标所以这种情况用常规的css截取文本有点难处理。于是在上网查阅后发现了几个方法第一种是用伪元素加定位把.11..盖在文字的上面第二种就是用js来实现了。
首先贴下常规的css截取文本的代码这种在大多数情况都可以适用
1、单行文本的溢出隐藏
white-space: nowrap;// 设置文字在一行显示不能换行
overflow: hidden;// 文字长度超出限定宽度时隐藏溢出的内容
text-overflow: ellipsis;// 当文字溢出时显示...来代表溢出的文本
2、多行文本的溢出隐藏
-webkit-line-clamp: 2;// 用来限制在一个块元素显示的文本的行数2 表示最多显示 2 行。
-webkit-box-orient: vertical;// 和 1 结合使用 设置或检索伸缩盒对象的子元素的排列方式
overflow: hidden;
text-overflow: ellipsis;
然后开始说下如何用js来实现
思路就是通过判断字符串的长度来找到截取的位置然后用slice()方法获取从0到指定位置的字符后面的字符都切掉再补一个 ... 来实现。
noMoreWord (text) {let newText textif(text.length 39) newText text.slice(0, 39)return newText
}
但是这样处理其实是有漏洞的因为设计稿是全中文的时候在一行半溢出隐藏但是实际情况肯定会有英文字母、数字、英文符号出现的而这些字符占的位置和中文占的位置是不一样的。所以在这里需要根据先获取字符的总字节然后通过字节的长度来决定需不需要隐藏。下面是优化后的代码 //判断字符串为中文字符串还是英文字符串中文字符、符号占两个字符英文字符、符号和数字占一个字符getStrLength (str) {let len 0for(let i 0; i str.length; i) {//中文字符if (str.charCodeAt(i) 127) {len 2 } else {len}}return len}//字符串截取noMoreWord (text, length, color#000000) {let newText text;//字符长度大于参数length的把后面多余的字符截取掉替换为...。if (getStrLength(text) length * 2) {newText span{text.slice(0, length)}span style{{color: color}}.../span/span;}return newText}; 注意noMoreWord()中的length是你传入的长度而getStrLength()中返回的是这串文本字节的长度所以在判断时需要把length*2。
