css文字过长显示...的几种方案

1.一排超长截距(完美兼容各种浏览器)

.zxx_text_overflow{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url('ellipsis.xml#ellipsis'); overflow:hidden;}

2.两排甚至多行超长截距：

method1:(兼容webkit内核的浏览器)

display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; //设置行数overflow: hidden;

method2:(js控制，兼容各个浏览器)

1、设置宽度是必须的，根据宽度来计算占满需要行数的长度

2、遍历循环直至沾满长度，进行文字的截断操作

****必须在页面上生成模拟的dom节点才能正确判断出文字加外部所包的div的长度****

张鑫旭js控制的那段代码用了递归调用，在阅读的时候有点不太理解，而且当时使用上有点问题，具体啥问题忘了，结合他的思想以及楼下的评论，自己写了个方法实现，这个方法有待改进，尤其是循环的改进上。主要是考虑到中英文字符以及符号的问题，所以进行了每个字符的遍历计算。

对于其文章中的等宽字体的使用，这种方法我也试过，但是在实践中中英字符所占的宽段还是不相等，可能是使用方法上的问题，还有点不可取的就是等宽字体可能在需求上不太符合大多数要求，故没有做深究。

参考文章：张鑫旭-点击打开链接

js代码如下：

function splitText(text,width,clamp){  //text：所需显示的文字； width:每行的长度；clamp:行数；var copyText="",index,flag=false;text = text.replace(/\ +/g, ""); //去掉空格text = text.replace(/[ ]/g, "");    //去掉空格text = text.replace(/[\r\n]/g, ""); //去掉回车换行for(var i=0;i<text.length;i++){copyText += text[i];var copySpan = document.createElement("span");copySpan.innerText = copyText;$(copySpan).hide().css({'position': 'absolute','width': 'auto','overflow': 'visible','font-size':'12px',//'letter-spacing':'.3px'});$("body").after(copySpan);var wth = $(copySpan).width();removeElement(copySpan);if(wth > width*clamp){index = i;flag = true;break;}}return flag?text.substring(0,i)+'...':text;}function removeElement(_element){  //删除处理元素(兼容各个浏览器)var _parentElement = _element.parentNode;if(_parentElement){_parentElement.removeChild(_element);  }}

css文字过长显示...的几种方案相关推荐

php 中文过长省略号,css实现文字过长显示省略号
本篇文章介绍了css实现文字过长显示省略号的方法,具有一定的参考价值,希望对学习css的朋友有帮助! 一.CSS样式解决文字过长显示省略号问题 1.一般样式一般 css 样式,当宽度不够时,可能会 ...
css内容过长显示省略号的几种解决方法
css内容过长显示省略号的几种解决方法参考文章: (1)css内容过长显示省略号的几种解决方法 (2)https://www.cnblogs.com/sinceForever/p/11350332. ...
echarts横坐标文字太长显示不完的两种解决办法：rotate旋转文字、调用函数让文字纵向排列
//方法1:横坐标文字太长显示不完,调用函数解决,在axisLabel下添加属性,让文字纵向排列: formatter:function(val){return val.split("&qu ...
iView表格显示图片和文字过长显示省略号，并且Tooltip提示
iView表格显示图片和文字过长显示省略号,并且Tooltip提示效果图代码 {title: 'LOGO',key: 'logo',align: "center",render ...
文字过长显示tooltip
前几天遇到一个问题:文字过长显示tooltip,反之不展示方法一: 文字超过12个字符剩余部分用省略号代替,展示tooltip <el-tooltip class="item ...
css 文字过长省略号,css实现文字过长显示省略号的方法
因为网页排版的需要,有些地方需要过长的问题加上省略号.比如:标题限制20个中文的宽度,超出的就用省略号代替.之前会使用程序截取的方法,不过使用css来截取更有利于SEO. 下面就介绍一下具体的使用方法 ...
css实现文字过长显示省略号的方法
转自:http://www.3lian.com/edu/2014/07-11/155082.html 因为网页排版的需要,有些地方需要过长的问题加上省略号.比如:标题限制20个中文的宽度,超出的就用省 ...
CSS处理文字一行显示，超出用省略号。包含一个微信小程序使用css文字溢出一行显示的一个bug
一.核心代码注意:text-overflow 必须要搭配 white-space 才能生效 overflow: hidden; /* 文字溢出隐藏 */ white-space: nowrap; ...
Echarts给折线图给横竖坐标轴添加箭头与标签文字过长显示不全处理
本人在做监控数据大屏时曾踩过不少坑,现将踩坑经验总结如下,数据大屏demo请点击这里一.饼图处理标签文字过长而显示不全的解决方案在使用echarts的过程中,有时会遇到标签文字过长导致显示不全的问 ...

css文字过长显示...的几种方案

css文字过长显示...的几种方案相关推荐

最新文章

热门文章