文字超出显示....

最近因为项目上的需求，文字超出多少显示...，一开始以为这个很简单，就是写个样式就行了，没想到啊，测试IE的时候出现问题了，不显示，周六收到测试人员打电话问怎么回事啊。。。。当时听到我也很无奈的，我记得我测的没问题啊（Chrome），抓紧给人家说你换成Chrome试一下，结果还真是。然后肯定是样式不兼容导致的了。网上大多数都是这样写得

    overflow:hidden;text-overflow:ellipsis; -webkit-line-clamp:3;word-break: break-all;-webkit-box-orient:vertical;display: -webkit-box;
复制代码

我不知道为什么我的只是显示一行，我设置了显示三行，但是不起作用。实在不想折腾css，索性就直接使用js来，这个时候有个问题，因为没办法计算每一个字符的宽度，只能一个一个的调试。如果兄弟你知道如何计算每一个字符的宽度请留下你的代码我学习一下。

/*** 超出部分显示···* params:num type:number,com type:string* num 控制显示字符长度，com控制显示dom元素*/function mitulineHide(num,com){let contain = document.querySelector(com);console.log(contain);let maxSize = num;let txt = contain.innerHTML;if(txt.length > num){console.log(1)txt = txt.substring(0,num-1)+"...";contain.innerHTML = txt;}else{return;}}mitulineHide(70,"p");
复制代码

转载于:https://juejin.im/post/5c971ff16fb9a070b33c5a91

文字超出显示....相关推荐

css实现文字超出显示省略号...
01.块状元素单行文本超出显示省略号: ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ove ...
div超出不换行_文字超出显示点点点之ellipsis 设置
一般情况下一行文字在一定区域显示的话如果不限定高度,那么在内容超过的宽度的话就会换行显示,为了页面的美观,目前的通用做法就是在最后显示-,然后鼠标悬浮显示完整内容,具体设置如下: height: 40 ...
【CSS】css文字超出显示省略号/文字超过三行显示省略号..
单行 .p1{/*单行*/white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} 多行 .p2{/*多行*/overflow: hidd ...
文字超出显示... css
一行文字超出显示... width: 200px; //宽度 overflow: hidden; //超出文本隐藏 white-space: nowrap; //不换行,只显示一行 text-over ...
css 文字超出显示省略号
css 文字超出显示省略号 <html> <style type="text/css">div{width: 100px;overflow: hidden; ...
兼容ie的文字超出显示省略号
兼容ie的文字超出显示省略号单行文本的溢出显示省略号: (需要加宽度width兼容部分浏览器) overflow: hidden; // 超出隐藏 text-overflow:ellipsis; / ...
canvas 文字超出显示省略号
项目实例,点击可查看以uni-app框架为例:可以把画图封装成一个函数调用. activityCanvas: function(arrImages, storeName, price, people ...
多行文字超出显示省略号
多行文字超出显示省略号... display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; //设置为超出三行后 ...
在td标签中文字超出显示省略号，鼠标悬停显示所有文本
在td标签中文字超出显示省略号,鼠标悬停显示所有文本首先得在table的style中加入table-layout:fixed,让表格固定,然后用width设定表格的宽度. 然后表格中所有的列都一样宽 ...
文字超出 ...显示
display: block; font-size:12px; overflow: hidden;/*超出部分隐藏*/ white-space: nowrap;/*不换行*/ text-overflo ...

文字超出显示....

文字超出显示....相关推荐

最新文章

热门文章