详解JS如何实现文字溢出时用省略号...显示
前一阵做需求时,有个小功能实现起来废了点脑细胞,觉得可以记录一下。
产品的具体诉求是:用户点击按钮进入详情页面,详情页内的卡片标题内容过长时,标题的前后两端正常展示,中间用省略号...表示,并且鼠标悬浮后,展示全部内容。
关于鼠标悬浮展示全部内容的代码就不放在这里了,本文主要写关于实现中间省略号...的代码。
实现思路
- 获取标题盒子的真实宽度, 我这里用的是clientWidth;
- 获取文本内容所占的实际宽度;
- 根据文字的大小计算出每个文字所占的宽度;
- 判断文本内容的实际宽度是否超出了标题盒子的宽度;
- 通过文字所占的宽度累加之和与标题盒子的宽度做对比,计算出要截取位置的索引;
- 同理,文本尾部的内容需要翻转一下,然后计算索引,截取完之后再翻转回来;
代码
html代码
<div class="title" id="test">近日,银行纷纷下调大额存单利率,但银行定期存款仍被疯抢。银行理财经理表示:有意向购买定期存款要尽快,不确定利率是否会再降。</div>
css代码: 设置文本不换行,同时设置overflow:hidden
让文本溢出盒子隐藏
.title { width: 640px; height: 40px; line-height: 40px; font-size: 14px; color: #00b388; border: 1px solid #ddd; overflow: hidden; /* text-overflow: ellipsis; */ white-space: nowrap; /* box-sizing: border-box; */ padding: 0 10px; }
javascript代码:
获取标题盒子的宽度时要注意,如果在css样式代码中设置了padding, 就需要获取标题盒子的左右padding值。 通过getComputedStyle
属性获取到所有的css样式属性对应的值, 由于获取的padding值都是带具体像素单位的,比如: px
,可以用parseInt特殊处理一下。
获取盒子的宽度的代码,我当时开发时是用canvas计算的,但计算的效果不太理想,后来逛社区,发现了嘉琪coder
大佬分享的文章,我这里就直接把代码搬过来用吧, 想了解的掘友可以直接滑到文章末尾查看。
判断文本内容是否超出标题盒子
// 标题盒子dom const dom = document.getElementById('test'); // 获取dom元素的padding值 function getPadding(el) { const domCss = window.getComputedStyle(el, null); const pl = Number.parseInt(domCss.paddingLeft, 10) || 0; const pr = Number.parseInt(domCss.paddingRight, 10) || 0; console.log('padding-left:', pl, 'padding-right:', pr); return { left: pl, right: pr } } // 检测dom元素的宽度, function checkLength(dom) { // 创建一个 Range 对象 const range = document.createRange(); // 设置选中文本的起始和结束位置 range.setStart(dom, 0), range.setEnd(dom, dom.childNodes.length); // 获取元素在文档中的位置和大小信息,这里直接获取的元素的宽度 let rangeWidth = range.getBoundingClientRect().width; // 获取的宽度一般都会有多位小数点,判断如果小于0.001的就直接舍掉 const offsetWidth = rangeWidth - Math.floor(rangeWidth); if (offsetWidth < 0.001) { rangeWidth = Math.floor(rangeWidth); } // 获取元素padding值 const { left, right } = getPadding(dom); const paddingWidth = left + right; // status:文本内容是否超出标题盒子; // width: 标题盒子真实能够容纳文本内容的宽度 return { status: paddingWidth + rangeWidth > dom.clientWidth, width: dom.clientWidth - paddingWidth }; }
通过charCodeAt返回指定位置的字符的Unicode
编码, 返回的值对应ASCII码表对应的值,0-127包含了常用的英文、数字、符号等,这些都是占一个字节长度的字符,而大于127的为占两个字节长度的字符。
截取和计算文本长度
// 计算文本长度,当长度之和大于等于dom元素的宽度后,返回当前文字所在的索引,截取时会用到。 function calcTextLength(text, width) { let realLength = 0; let index = 0; for (let i = 0; i < text.length; i++) { charCode = text.charCodeAt(i); if (charCode >= 0 && charCode <= 128) { realLength += 1; } else { realLength += 2 * 14; // 14是字体大小 } // 判断长度,为true时终止循环,记录索引并返回 if (realLength >= width) { index = i; break; } } return index; } // 设置文本内容 function setTextContent(text) { const { status, width } = checkLength(dom); let str = ''; if (status) { // 翻转文本 let reverseStr = text.split('').reverse().join(''); // 计算左右两边文本要截取的字符索引 const leftTextIndex = calcTextLength(text, width); const rightTextIndex = calcTextLength(reverseStr, width); // 将右侧字符先截取,后翻转 reverseStr = reverseStr.substring(0, rightTextIndex); reverseStr = reverseStr.split('').reverse().join(''); // 字符拼接 str = `${text.substring(0, leftTextIndex)}...${reverseStr}`; } else { str = text; } dom.innerHTML = str; }
最终实现的效果如下:
上面就是此功能的所有代码了,如果想要在本地试验的话,可以在本地新建一个html文件,复制上面代码就可以了。
下面记录下从社区内学到的相关知识:
- js判断文字被溢出隐藏的几种方法;
- JS获取字符串长度的几种常用方法,汉字算两个字节;
1、 js判断文字被溢出隐藏的几种方法
1. Element-plus这个UI框架中的表格组件实现的方案。
通过document.createRange
和document.getBoundingClientRect()
这两个方法实现的。也就是我上面代码中实现的checkLength
方法。
2. 创建一个隐藏的div模拟实际宽度
通过创建一个不会在页面显示出来的dom元素,然后把文本内容设置进去,真实的文本长度与标题盒子比较宽度,判断是否被溢出隐藏了。
function getDomDivWidth(dom) { const elementWidth = dom.clientWidth; const tempElement = document.createElement('div'); const style = window.getComputedStyle(dom, null) const { left, right } = getPadding(dom); // 这里我写的有点重复了,可以优化 tempElement.style.cssText = ` position: absolute; top: -9999px; left: -9999px; white-space: nowrap; padding-left:${style.paddingLeft}; padding-right:${style.paddingRight}; font-size: ${style.fontSize}; font-family: ${style.fontFamily}; font-weight: ${style.fontWeight}; letter-spacing: ${style.letterSpacing}; `; tempElement.textContent = dom.textContent; document.body.appendChild(tempElement); const obj = { status: tempElement.clientWidth + right + left > elementWidth, width: elementWidth - left - right } document.body.removeChild(tempElement); return obj; }
3. 创建一个block元素来包裹inline元素
这种方法是在UI框架acro design vue
中实现的。外层套一个块级(block)元素,内部是一个行内(inline)元素。给外层元素设置溢出隐藏的样式属性,不对内层元素做处理,这样内层元素的宽度是不变的。因此,通过获取内层元素的宽度和外层元素的宽度作比较,就可以判断出文本是否被溢出隐藏了。
// html代码 <div class="title" id="test"> <span class="content">近日,银行纷纷下调大额存单利率,但银行定期存款仍被疯抢。银行理财经理表示:有意向购买定期存款要尽快,不确定利率是否会再降。</span> </div> // 创建一个block元素来包裹inline元素 const content = document.querySelector('.content'); function getBlockDomWidth(dom) { const { left, right } = getPadding(dom); console.log(dom.clientWidth, content.clientWidth) const obj = { status: dom.clientWidth < content.clientWidth + left + right, width: dom.clientWidth - left - right } return obj; }
4. 使用canvas中的measureText方法和TextMetrics对象来获取元素的宽度
通过Canvas 2D渲染上下文(context)可以调用measureText方法,此方法会返回TextMetrics对象,该对象的width
属性值就是字符占据的宽度,由此也能获取到文本的真实宽度,此方法有弊端,比如说兼容性,精确度等等。
// 获取文本长度 function getTextWidth(text, font = 14) { const canvas = document.createElement("canvas"); const context = canvas.getContext("2d") context.font = font const metrics = context.measureText(text); return metrics.width }
2、JS获取字符串长度的几种常用方法
1. 通过charCodeAt判断字符编码
通过charCodeAt获取指定位置字符的Unicode
编码,返回的值对应ASCII码表对应的值,0-127包含了常用的英文、数字、符号等,这些都是占一个字节长度的字符,而大于127的为占两个字节长度的字符。
function calcTextLength(text) { let realLength = 0; for (let i = 0; i < text.length; i++) { charCode = text.charCodeAt(i); if (charCode >= 0 && charCode <= 128) { realLength += 1; } else { realLength += 2; } } return realLength; }
2. 采取将双字节字符替换成"aa"的做法,取长度
function getTextWidth(text) { return text.replace(/[^\x00-\xff]/g,"aa").length; };
到此这篇关于详解JS如何实现文字溢出时用省略号...显示的文章就介绍到这了,更多相关JS文字溢出内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
这篇文章主要介绍了最全正则表达式:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等,通过语法介绍作用表达式等详细解释了正则表达式的使用,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。2017-08-08基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
这篇文章主要介绍了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除的相关资料,需要的朋友可以参考下2016-05-05使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
在启用Firebug的情况下访问GMail会收到一个 Firebug会让Gmail变慢 的警告,这是如何检测的呢?这里就说说。2010-12-12
最新评论