js控制文字溢出显示省略号

server/2024/12/27 5:25:05/ 
.text{display: -webkit-box;overflow: hidden;white-space: normal;text-overflow: ellipsis;word-wrap: break-word;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
}

本人有个需求就是在一个盒子内有一段文本，然后控制文本显示两行，第二行要显示省略号，本人通过以上方式通过css解决了
但是有个问题,因为这个区域要被截图保存下来，本人使用html-to-image插件去完成了截图操作，但就在这时，bug出现了，例如在真机上面显示省略号，但是在截图上面并没有省略号，而是完整的显示出了两行文字，可能由于这个文字大小在当前机型上面刚好溢出，但是没有达到截图的容器的溢出条件，就出现了一个尴尬的事情，截图没省略号，真机有，然后如果多补充点文字，截图虽然显示了省略号，但是省略号前面还是比真机多几个字，，，因此后面不考虑使用css来做了，改成js来做，具体步骤如下：

依赖于jQuery（不推荐）

使用jQuery和jQuery.ellipsis.js来解决

jQuery的代码各位可以百度,这里提供一个CDN地址: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js

jQuery.ellipsis.js代码如下:

/*!* jQuery.ellipsis* https://github.com/jjenzz/jquery.ellipsis* --------------------------------------------------------------------------* Copyright (c) 2013 J. Smith (@jjenzz)* Dual licensed under the MIT and GPL licenses:* https://www.opensource.org/licenses/mit-license.php* http://www.gnu.org/licenses/gpl.html** adds a class to the last 'allowed' line of text so you can apply* text-overflow: ellipsis;*/
(function (a) { if (typeof define === "function" && define.amd) { define(["jquery"], a) } else { a(jQuery) } }(function (d) { var c = "ellipsis", b = '<span style="white-space: nowrap;">', e = { lines: "auto", ellipClass: "ellip", responsive: false }; function a(h, q) { var m = this, w = 0, g = [], k, p, i, f, j, n, s; m.$cont = d(h); m.opts = d.extend({}, e, q); function o() { m.text = m.$cont.text(); m.opts.ellipLineClass = m.opts.ellipClass + "-line"; m.$el = d('<span class="' + m.opts.ellipClass + '" />'); m.$el.text(m.text); m.$cont.empty().append(m.$el); t() } function t() { if (typeof m.opts.lines === "number" && m.opts.lines < 2) { m.$el.addClass(m.opts.ellipLineClass); return } n = m.$cont.height(); if (m.opts.lines === "auto" && m.$el.prop("scrollHeight") <= n) { return } if (!k) { return } s = d.trim(m.text).split(/\s+/); m.$el.html(b + s.join("</span> " + b) + "</span>"); m.$el.find("span").each(k); if (p != null) { u(p) } } function u(x) { s[x] = '<span class="' + m.opts.ellipLineClass + '">' + s[x]; s.push("</span>"); m.$el.html(s.join(" ")) } if (m.opts.lines === "auto") { var r = function (y, A) { var x = d(A), z = x.position().top; j = j || x.height(); if (z === f) { g[w].push(x) } else { f = z; w += 1; g[w] = [x] } if (z + j > n) { p = y - g[w - 1].length; return false } }; k = r } if (typeof m.opts.lines === "number" && m.opts.lines > 1) { var l = function (y, A) { var x = d(A), z = x.position().top; if (z !== f) { f = z; w += 1 } if (w === m.opts.lines) { p = y; return false } }; k = l } if (m.opts.responsive) { var v = function () { g = []; w = 0; f = null; p = null; m.$el.html(m.text); clearTimeout(i); i = setTimeout(t, 100) }; d(window).on("resize." + c, v) } o() } d.fn[c] = function (f) { return this.each(function () { try { d(this).data(c, (new a(this, f))) } catch (g) { if (window.console) { console.error(c + ": " + g) } } }) } }));

引入到页面使用

方式一(固定内容推荐,非动态内容不推荐)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script src="./jQuery.ellipsis.js"></script><style>.aaa,.aaa2 {background: #eee;border: 1px solid #ccc;width: 130px;margin-left: 200px;}.aaa2{margin-top: 50px;}/* 下面这三个css不能删,否则不起作用了 */.ellip {display: block;height: 100%;}.ellip-line {display: inline-block;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;}.ellip,.ellip-line {position: relative;overflow: hidden;max-width: 100%;}</style>
</head><body><div class="aaa">你哈哈哈哈哈哈啊哈哈哈哈哈哈哈颇大开发跑我就发很日入好闺女诶欧哈你噶IEUR个</div><div class="aaa2">你哈哈哈哈哈哈啊&nbsp;哈哈哈哈哈哈哈颇大开发跑我就发很日入好闺女诶欧哈你噶IEUR个</div><script>$('.aaa').ellipsis({ lines: 2 });  // 控制第二行溢出显示省略号$('.aaa2').ellipsis({ lines: 2 }); // // 控制第二行溢出显示省略号</script>
</body></html>

上面内容可以看到，需要换行的部分必须手动在html里面加换行或者&nbsp;，因此这种方式适合静态的，不适用于动态的，可以看下面这个

方式二(动态内容推荐)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script src="./jQuery.ellipsis.js"></script><style>.aaa {background: #eee;border: 1px solid #ccc;width: 150px;}/* 下面这三个css不能删,否则不起作用了 */.ellip {display: block;height: 100%;}.ellip-line {display: inline-block;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;}.ellip,.ellip-line {position: relative;overflow: hidden;max-width: 100%;}</style>
</head><body><div class="aaa">abababababa我还得覅维护诶哈哈哈哈哈哈颇大开发跑我就发很日入好闺女诶欧哈你噶IEUR个</div><script>javascript">function getTextWidth(text, font) {// 计算字符串的宽// 创建临时canvas元素var canvas = document.createElement("canvas");var context = canvas.getContext("2d");context.font = font;return context.measureText(text).width;}let aaa = document.querySelector('.aaa'); // 获取容器let aaawidth = aaa.clientWidth;  // 拿到容器的宽度let text = aaa.innerText;let font = getComputedStyle(aaa).font; // 获取元素的实际字体样式(为了算文字大小)let textWidth = getTextWidth(text, font); // 计算字符串的宽度console.log(aaawidth,textWidth);  // 容器的宽和字符串的宽度let textarr = text.split('') // 将字符串分割成数组进行遍历let start_str = '' // 第一行的文字内容let end_str = '' // 第二行的文字内容(还可以加其他更多的行，只需要在下面多几个判断就好)let linshistr = '' // 临时存储用于计算的字符串textarr.forEach((item)=>{linshistr += item // 每次循环都让临时字符串累加// 下面如果有第二行第三行的话直接判断 > n*aaawidth 即可if(getTextWidth(linshistr, font) > aaawidth){// 如果小于容器容器宽度，让第一行的字符串进行累加end_str += item   }else{// 如果超出容器，都是在第二行，直接让第二行元素累加start_str+= item}})console.log(start_str, end_str); // 获取第一行和第二行元素内容aaa.innerHTML = start_str + '&nbsp;' + end_str // 加个&nbsp;可以换行，就像方式一写死的一样$('.aaa').ellipsis({ lines: 2 }); // 再去使用jQuery.ellipsis.js的ellipsis方法让第二行显示省略号</script>
</body></html>

直接使用js

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.aaa {background: #eee;border: 1px solid #ccc;width: 150px;}</style>
</head><body><div class="aaa"><div class="son"></div><div class="son2"></div></div><script>javascript">let str = 'a我还得覅维护诶哈哈哈哈哈哈颇大开发跑我就发很日入好闺女诶欧哈你噶IEUR个' // 获取文本内容function getTextWidth(text, font) { // 计算文本字符串的宽// 创建临时canvas元素var canvas = document.createElement("canvas");var context = canvas.getContext("2d");context.font = font;return context.measureText(text).width;}// 获取元素实际的容器let aaa = document.querySelector('.aaa');let aaawidth = aaa.clientWidth; // 获取容器宽度let font = getComputedStyle(aaa).font; // 获取元素的实际字体样式，(为了算文字大小，这个跟字符串的宽有影响)let textWidth = getTextWidth(str, font); // // 计算字符串的宽度console.log(aaawidth, textWidth); // // 容器的宽和字符串的宽度let textarr = str.split('')  // 将字符串分割成数组进行遍历let start_str = '' // 第一行的文字内容let end_str = '' // 第二行的文字内容(还可以加其他更多的行，只需要在下面多几个判断就好)let linshistr = '' // 临时存储用于计算的字符串textarr.forEach((item) => {linshistr += item// 第一行的判断if (getTextWidth(linshistr, font) < aaawidth) {start_str += item}// 第二行的判断if (getTextWidth(linshistr, font) > aaawidth && getTextWidth(linshistr, font) < 2 * aaawidth) {end_str += item}// 第n行的判断// if (getTextWidth(linshistr, font) > ( n - 1 ) * aaawidth &&getTextWidth(linshistr, font) > n * aaawidth) {}})console.log(start_str, end_str); // 输出第一行和第二行的文字内容function wordLength(e) {var length = 0var arr = e.split('')arr.map(function (char) {if (char.charCodeAt(0) > 255) {//字符编码大于255，说明是双字节字符(中文占两个字符,英文大小写,特殊字符等都是一个字符)length += 2} else {length++}})return length}let zijie = wordLength(start_str + end_str) // 判断下字节长度，中文字占两个，英文特殊字符等占一个let flag = zijie % 2 == 0 ? true : false // 判断是否是偶数，如果是偶数，让省略号那里减去1，否则减去2，因为比如某一行全部是中文，那这一行的字节肯定是偶数，如果是奇数，没有减够，则会被溢出一行，如果都减2，第二行就显得被缩回了一点document.querySelector('.son').innerHTML = start_strdocument.querySelector('.son2').innerHTML = flag ? (end_str.substring(0, end_str.length - 1) + '...') : (end_str.substring(0, end_str.length - 2) + '...');</script>
</body></html>

http://www.ppmy.cn/server/153539.html

相关文章

使用FFmpeg进行拉流和推流操作

使用FFmpeg进行拉流和推流操作

FFmpeg是一款强大的多媒体处理工具&#xff0c;可以用于视频的录制、转换、推流和拉流等操作。下面将详细介绍如何使用FFmpeg进行拉流和推流操作。 1. FFmpeg推流操作 推流是将本地的音视频流推送到流媒体服务器上&#xff0c;例如主播将本地电脑上的画面推流到直播平台的流媒…
阅读更多...
微软 CEO 萨提亚・纳德拉：回顾过去十年，展望 AI 时代的战略布局

微软 CEO 萨提亚・纳德拉：回顾过去十年，展望 AI 时代的战略布局

近日&#xff0c;微软 CEO 萨提亚・纳德拉与著名投资人比尔・格里和布拉德・格斯特纳进行了一场深度对话&#xff0c;回顾了过去十年微软的转型历程&#xff0c;并展望了 AI 时代的战略布局。在这次访谈中&#xff0c;纳德拉分享了他在微软的早期经历&#xff0c;包括他加入微软…
阅读更多...
feign验签不通过，但是postman没问题

feign验签不通过，但是postman没问题

测试一个外部api的时候发现&#xff0c;同样的签名方法和payload&#xff0c;放在postman请求完全没问题&#xff0c;curl也能通过&#xff0c;但是到了feign就签名错误。 百思不得其解&#xff0c;后来发现了问题。 计算签名的时候&#xff0c;payload使用的格式是 {"…
阅读更多...
PDF书籍《手写调用链监控APM系统-Java版》第4章 SPI服务模块化系统

PDF书籍《手写调用链监控APM系统-Java版》第4章 SPI服务模块化系统

本人阅读了 Skywalking 的大部分核心代码&#xff0c;也了解了相关的文献&#xff0c;对此深有感悟&#xff0c;特此借助巨人的思想自己手动用JAVA语言实现了一个 “调用链监控APM” 系统。本书采用边讲解实现原理边编写代码的方式&#xff0c;看本书时一定要跟着敲代码。 作者…
阅读更多...
HTML5实现好看的圣诞节网站源码

HTML5实现好看的圣诞节网站源码

HTML5实现好看的圣诞节网站源码 前言一、设计来源1.1 主界面1.2 圣诞节由来界面1.3 圣诞活动界面1.4 圣诞活动门票界面1.5 团队介绍界面1.6 圣诞照片墙界面1.7 圣诞留言界面1.8 圣诞趣事界面1.9 联系我们界面 二、效果和源码2.1 动态效果2.2 源代码 源码下载结束语 HTML5实现好…
阅读更多...
小波分析算法

小波分析算法

小波分析是近年来发展起来的一种新的时频分析方法&#xff0c;其典型应用包括齿轮变速控制、起重机的非正常噪声、通信信号处理、物理中的间断现象等。而频域分析的着眼点在于&#xff0c;区分突发信号的稳定信号&#xff0c;以及定量分析其能量&#xff1b;其典型应用包括细胞…
阅读更多...
Amazon Bedrock Claude 3 在客户服务自动化中的应用方法

Amazon Bedrock Claude 3 在客户服务自动化中的应用方法

随着企业对客户体验的重视&#xff0c;客户服务自动化已成为提升效率和满意度的重要手段。Amazon Bedrock中的Claude 3模型&#xff0c;凭借其强大的自然语言处理能力&#xff0c;成为了客户服务自动化的理想选择。以下是九河云总结的一些具体的方法&#xff0c;展示如何利用Cl…
阅读更多...
MFC/C++学习系列之简单记录11——树控件的使用

MFC/C++学习系列之简单记录11——树控件的使用

MFC/C学习系列之简单记录11——树控件的使用 前言CTreectrl使用界面设置代码使用简单设计其他使用注意&#xff01; 总结 前言 在之前的界面设计中使用得很少&#xff0c;但是可以学习一下&#xff0c;以备不时之需&#xff01; CTreectrl使用 界面设置 在工具箱中选择Tree C…
阅读更多...
最新文章

Copyright @ 2022~2023