CSS实现单行或多行文本溢出容器时不换行并且自动填充省略’...‘符号

CSS实现单行或多行文本溢出容器时不换行并且自动填充省略"…"符号

在有需求的地方粘入如下样式代码

需要注意 包含文本的容器 需要声明自己的height、width

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;/*数字代表行数 2代表两行*/
-webkit-box-orient: vertical;
word-break: break-all; 

实现效果如下:

可以看到文本长度即将超出容器范围时,不会换行或撑大容器,而变为自动填充省略号
在这里插入图片描述

你可能感兴趣的:(#,CSS,css,前端,css3)