稀土掘金技术社区 2024年12月23日
js如何实现当文本内容过长时,中间显示省略号...,两端正常展示
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

本文详细介绍了如何使用JavaScript实现文本内容超出容器宽度时,中间部分显示省略号,鼠标悬浮显示全部内容的效果。文章首先阐述了实现思路,包括获取元素宽度、文本实际宽度以及计算截取位置。接着,提供了详细的HTML、CSS和JavaScript代码,包括如何获取元素的padding值、判断文本是否溢出、计算文本长度和设置文本内容。此外,文章还总结了五种判断文字溢出隐藏的方法,以及两种计算字符串长度的方法,并提供了参考文章链接,便于读者深入学习。

📏 获取元素宽度:通过`clientWidth`获取元素真实宽度,并考虑`padding`值的影响,使用`getComputedStyle`获取并解析`padding`值。

🧮 计算文本长度:利用`charCodeAt`判断字符编码,区分单字节和双字节字符,计算文本的实际长度,并与容器宽度进行比较,从而确定截取位置。

✂️ 文本截取与拼接:根据计算出的截取索引,截取文本的前后两部分,并在中间添加省略号。同时,为了保证尾部内容正常显示,需要将尾部文本翻转后再截取,最后再翻转回来。

💡 多种溢出判断方法:文章总结了五种判断文本溢出隐藏的方法,包括使用`document.createRange`、创建隐藏`div`模拟宽度、使用`block`元素包裹`inline`元素、`canvas`的`measureText`方法以及使用纯`CSS`实现。

🔤 字符串长度计算:文章介绍了两种计算字符串长度的方法,一种是通过`charCodeAt`判断字符编码,另一种是将双字节字符替换为`aa`计算长度。

原创 娜个小部呀 2024-12-23 09:11 重庆

点击关注公众号,“技术干货” 及时达!


点击关注公众号,“技术干货” 及时达!

前一阵做需求时,有个小功能实现起来废了点脑细胞,觉得可以记录一下。

产品的具体诉求是:用户点击按钮进入详情页面,详情页内的卡片标题内容过长时,标题的前后两端正常展示,中间用省略号...表示,并且鼠标悬浮后,展示全部内容。

关于鼠标悬浮展示全部内容的代码就不放在这里了,本文主要写关于实现中间省略号...的代码。

实现思路

    获取标题盒子的真实宽度, 我这里用的是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大佬分享的文章,我这里就直接把代码搬过来用吧, 想了解的掘友可以直接滑到文章末尾查看。

判断文本内容是否超出标题盒子

 // 标题盒子domconst 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;}

最终实现的效果如下:

image.png

上面就是此功能的所有代码了,如果想要在本地试验的话,可以在本地新建一个html文件,复制上面代码就可以了。

下面记录下从社区内学到的相关知识:

    js判断文字被溢出隐藏的几种方法;

    JS获取字符串长度的几种常用方法,汉字算两个字节;

1、 js判断文字被溢出隐藏的几种方法

1. Element-plus这个UI框架中的表格组件实现的方案。

通过document.createRangedocument.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}

5. 使用css实现

这种方式来自评论区的掘友@S_mosar提供的思路。先来看下效果:


代码如下:css部分

.con {    font-size: 14px;    color: #666;    width: 600px;    margin: 50px auto;    border-radius: 8px;    padding: 15px;    overflow: hidden;    resize: horizontal;    box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;}
.wrap { position: relative; line-height: 2; height: 2em; padding: 0 10px; overflow: hidden; background: #fff; margin: 5px 0;}
.wrap:nth-child(odd) { background: #f5f5f5;}
.title { display: block; position: relative; background: inherit; text-align: justify; height: 2em; overflow: hidden; top: -4em;}
.txt { display: block; max-height: 4em;}.title::before{ content: attr(title); width: 50%; float: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl;}

html部分

<ul class="con">    <li class="wrap">        <span class="txt">CSS 实现优惠券的技巧 - 2021-03-26</span>        <span class="title" title="CSS 实现优惠券的技巧 - 2021-03-26">CSS 实现优惠券的技巧 - 2021-03-26</span>    </li>    <li class="wrap">        <span class="txt">CSS 测试标题,这是一个稍微有点长的标题,超出一行以后才会有title提示,标题是 实现优惠券的技巧 - 2021-03-26</span>        <span class="title" title="CSS 测试标题,这是一个稍微有点长的标题,超出一行以后才会有title提示,标题是 实现优惠券的技巧 - 2021-03-26">CSS            测试标题,这是一个稍微有点长的标题,超出一行以后才会有title提示,标题是 实现优惠券的技巧 - 2021-03-26</span>    </li>    <li class="wrap">        <span class="txt">CSS 拖拽?</span>        <span class="title" title="CSS 拖拽?">CSS 拖拽?</span>    </li>    <li class="wrap">        <span class="txt">CSS 文本超出自动显示title</span>        <span class="title" title="CSS 文本超出自动显示title">CSS 文本超出自动显示title</span>    </li></ul>

思路解析:

    文字内容的父级标签li设置line-height: 2;overflow: hidden;height: 2em;,因此 li 标签的高度是当前元素字体大小的2倍,行高也是当前字体大小的2倍,同时内容若溢出则隐藏。

    li 标签内部有两个 span 标签,二者的作用分别是:类名为.txt的标签用来展示不需要省略号时的文本,类名为.title用来展示需要省略号时的文本,具体是如何实现的请看第五步。

    .title设置伪类before,将伪类宽度设置为50%,搭配浮动float: right;,使得伪类文本内容靠右,这样设置后,.title和伪类就会各占父级宽度的一半了。

    .title标签设置text-align: justify;,用来将文本内容和伪类的内容两端对齐。

    给伪类before设置文字对齐方式direction: rtl;,将伪类内的文本从右向左流动,即right to left,再设置溢出省略的css样式就可以了。

    .title标签设置了top: -4em,.txt标签设置max-height: 4em;这样保证.title永远都在.txt上面,当内容足够长,.txt文本内容会换行,导致高度从默认2em变为4em,而.title位置是-4em,此时正好将.txt覆盖掉,此时显示的就是.title标签的内容了。

知识点:text-align: justify;

需要注意的是,text-align: justify; 主要用于多行文本。对于单行文本,这个值的效果与 text-align: left; 相同,因为单行文本无法两端对齐。

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;};

参考文章

1. JS如何判断文字被ellipsis了?

2. Canvas API 中文网

3. JS获取字符串长度的常用方法,汉字算两个字节

4. canvas绘制字体偏上不居中问题、文字垂直居中后偏上问题、measureText方法和TextMetrics对象

点击关注公众号,“技术干货” 及时达!

阅读原文

跳转微信打开

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

JavaScript 文本溢出 省略号 字符编码 DOM操作
相关文章