js实现文本省略，js文本超出用省略号代替

怎么用js实现多行文本溢出用省略号?

1、之前做项目管理项目比较多，竟然从来不知道多行文本溢出显示省略号的常规写法 （overflow： hidden；text-overflow：ellipsis； display： -webkit-box；-webkit-line-clamp： 3；-webkit-box-orient： vertical；）在IE和Firefox是无效的，可见前端学习的无止境不止体现在js和各种主流框架等等，在css上也是一样。

2、增加-webkit-line-clamp： 2；（2是两行的意思）。

3、显示省略号。js隐藏多行显示多行为显示省略号。多行溢出隐藏显示省略号功能的JS实现，在页面重构中，经常需要将过多的内容隐藏而显示部分，在单行文本中实现非常简单，但是在多行文本中，则需要根据实际选择不同的方式显示。

4、就目前而言，js实现几率为0...当然你愿意去做是可以的，用width/一个字符的宽度，然后得到的商是这个element的最大字符数量，但是现在的字符有些不等宽，会造成溢出或不够。。

5、先说一下，看看能不能自己实现了。不知道页面上面是不是可以用c：if标签，如果不可以，而用得是嵌入java代码的形式，也行。自己看着判断一下字符串的长度，如果超过一定的长度（可以设为十个或者几个字），就显示截取固定长度的字符串，然后后面显示省略号。这是省略号的显示。鼠标尝过，显示全部文本。

相关问答

Q1: 多行显示时文字最后多余的用省略号显示。怎么用js写

1、之前做项目管理项目比较多，竟然从来不知道多行文本溢出显示省略号的常规写法 （overflow： hidden；text-overflow：ellipsis； display： -webkit-box；-webkit-line-clamp： 3；-webkit-box-orient： vertical；）在IE和Firefox是无效的，可见前端学习的无止境不止体现在js和各种主流框架等等，在css上也是一样。

2、增加-webkit-line-clamp： 2；（2是两行的意思）。

3、一般在网页中控制文字的显示字数且多余的字用省略号代替。不会有js代码的。那种反而浪费时间。用下面的方法。只要给那个css标签定义一下样式就行了。

4、是的，css只支持一行超出显示省略号的。如果又想显示多行，又想把超出的显示为省略号，可以用程序处理，javascript就可以的。

5、截取目标长度的字符串即可实现上述功能，这需要jquery的substr()方法：stringObject.substr(start，length)功能 substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。参数 start必需。要抽取的子串的起始下标。length可选。子串中的字符数。

6、可以提供两种方法，一是用程序输出时截字，二是用js判断字数截取。

Q2: td里面的文字有通过br换行,我怎么让它单行溢出显示省略号呢

1、加..这样的省略号一般是由程序员来做的，页面前台用样式控制高度超出部分隐藏。 如果非要用样式来实现也是可以的，做一个...的图片用来当背景从右侧开始显示。

2、实现方法：overflow： hidden；text-overflow：ellipsis；white-space： nowrap；效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出显示省略号，如下。

3、} .mytable td{ width：100%；word-break：keep-all；/* 不换行 */ white-space：nowrap；/* 不换行 */ overflow：hidden；/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow：ellipsis；/* 当对象内文本溢出时显示省略标记(...) ；需与overflow：hidden；一 起使用。

4、是待省略的意思。要省略就要它不换行white-space：nowrap。不换行就会有超出部分显示，这超出的部分要让它隐藏overflow：hidden；最后就是它要显示省略号text-overflow：ellipsis。缩进文本：把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。

5、单行样式：多行样式：我项目中用到的是两行，效果如下图 -webkit-line-clamp 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。 常见结合属性：-display： -webkit-box； 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

Q3: js隐藏多行显示多行

显示省略号。js隐藏多行显示多行为显示省略号。多行溢出隐藏显示省略号功能的JS实现，在页面重构中，经常需要将过多的内容隐藏而显示部分，在单行文本中实现非常简单，但是在多行文本中，则需要根据实际选择不同的方式显示。

计算表格高度和表格行高。给表格高度设置一个初始值。根据表格中的内容动态调整表格高度。计算出需要添加的空白行数。按照表格行高添加空白行。重新设置表格高度。更新页面显示效果。

table-row-group此元素会作为一个或多个行的分组来显示（类似tbody）。table-header-group此元素会作为一个或多个行的分组来显示（类似thead）。table-footer-group此元素会作为一个或多个行的分组来显示（类似tfoot）。table-row此元素会作为一个表格行显示（类似tr）。

原理：就是讲全部的div都隐藏只有点击的div显示。

js实现文本省略的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js文本超出用省略号代替、js实现文本省略的信息别忘了在本站进行查找喔。