html字符超出指定高度后省略显示_html/css_WEB-ITnose

如图这种效果,我知道一种方法,但不支持火狐和IE,还有就是最后跟着的那个[详情]又该怎么加?最好别用javascript,

回复讨论(解决方案)

最好别用javascript??
不用javascript怎么做、

最好别用javascript??
不用javascript怎么做、

必须用javascript吗?那用了怎么做好?

你这明显不是前端控制的啊.
让程序截取按照字节长度截取字符串.

貌似这个还真是需要做字符串截取！ 不然无法控制显示内容的字数。 CSS还没有强大到这样。

CSS就能办到，只是最后的详细个字段，我还不知道怎么弄
overflow:hidden; text-overflow:ellipsis;white-space:nowrap;
把这三个属性加上就行了，不过一定要指定容器高度。
有一点不足的是，这个只能显示一行文本，如果是多行文本，就失效。
某些浏览器是支持多行的。

首先你确定一下设置的高度能放下几行文字,假如有3行
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;

不懂可以查一下line-clamp用法！

首先你确定一下设置的高度能放下几行文字,假如有3行
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;

不懂可以查一下line-clamp用法！

请问下那些浏览器是webkit，我没找到具体的资料

首先你确定一下设置的高度能放下几行文字,假如有3行
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;

不懂可以查一下line-clamp用法！

请问下那些浏览器是webkit，我没找到具体的资料

可以查看一下 这个网址 http://www.css88.com/archives/5206#more-5206

首先你确定一下设置的高度能放下几行文字,假如有3行
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;

不懂可以查一下line-clamp用法！

请问下那些浏览器是webkit，我没找到具体的资料

可以查看一下 这个网址 http://www.css88.com/archives/5206#more-5206

学习了。感谢分享