关于多行溢出文本变成“...”这个简单的问题

Question

跪求解答我的疑惑；
1.比方说新闻资讯，超出的文本用“...”代替；
我以前的解决方案是文本用p包裹，这个p外面放一个固定高度的div，当p超过这个div时，替换溢出的文本为‘...’;
2.今天忽然发现如果新闻内容如果是拿富文本编辑的话，这个方法也就失灵了；
那么 用.text()获取文本，然后截取规定字数的文本然后+‘...’这种方法合适，还是有其他的方法，比较懵逼。

不好意思，问题没写清楚
时间长了我都忘了为什么我一直没用过text-overflow:ellipsis；
因为一般都是多行文本

Answer 1

单行文本可以用text-overflow,多行文本的话还是用js吧
用js的话，一个思路是截取固定字数的文本加上...，但是这样如果出现数字英文中文混杂的，可能出现长度不够，另一个思路就是div高度固定并且overflow:hidden,js判断长度，然后加上一个class，用伪元素模拟...然后定位到最后遮盖住最后的几个字，因为有可能会把一个字遮挡掉一部分，所以最好用半透明的图来做...，当然这种做法也很恶心

Answer 2

CSS3的：

text-overflow属性

clip：
当内联内容溢出块容器时，将溢出部分裁切掉。
ellipsis：
当内联内容溢出块容器时，将溢出部分替换为（...）

Answer 3

css:

  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;

Answer 4

直接text-overflow:ellipsis;；http://www.w3school.com.cn/ti...上活生生的例子啊大兄弟，你说的富文本编辑新闻内容是什么意思？在类似于textarea标签内显示文字？textarea；有col,row，maxlength，wrap等有效控制文本内容的属性啊。或者，也可以如你自己所说的，配合js,获取内容，判断长度，超出的就删除并用"..."替换。甚至你可以用后台判断（如php有个规定字符长度的方法）限制一下后台数据字符长度也是可行的啊

Answer 5

https://github.com/rviscomi/t...

Answer 6

还是用...吧 多行用css始终会有兼容问题

Answer 7

我觉得可以参考这个地址。兼容性好，缺点还是有的，如果结尾需要打上省略号的附近是英文字符话就会有问题。

Answer 8

张鑫旭大神有一个博文写的不错，你可以看下，基本实现了你要的效果：关于文字内容溢出用点点点(…)省略号表示

Answer 9

兼容 IE8，不需要显示全部的把伪元素去掉能兼容 IE7。

http://jsfiddle.net/imys/wymx...