欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-06-04 17:30:24
...
如图这种效果,我知道一种方法,但不支持火狐和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
学习了。感谢分享