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

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

Boomy

AI音乐生成工具，创建生成音乐,与世界分享.

272

查看详情

回复讨论(解决方案)

最好别用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用法！

首先你确定一下设置的高度能放下几行文字,假如有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用法！