css里面怎么让文字长的时候两行显示,最多两行,多余的省略号显示,最重要...

发布网友发布时间：2022-04-23 21:02

我来回答

共3个回答

热心网友时间：2022-04-06 12:11

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：

div{

width: 100px;

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

}

3、浏览器运行index.html页面，此时文字超过2行会自动把多余部分用省略号显示。

热心网友时间：2022-04-06 13:29

如果想要在一行里实现“超出长度显示省略号”，是可以的。

overflow: hidden;white-space: nowrap;text-overflow:ellipsis;
这几句css就可以，不要加上去的容器一定要写了宽度的

注意：这里实现的是“超出长度”，而不是“超出字数”，并且在一行里实现。

如果是两行或者三行的容器，想要纯用css实现这个方法，是没办法做到的。

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

热心网友时间：2022-04-06 15:04

.pTwoLine{
white-space:initial;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
关键词-webkit-line-clamp: 2;最多显示2行， text-overflow: ellipsis;超过2行...