网站建设需要哪些资料,图书馆新生专栏网站建设,宣传片拍摄报价明细,苏宁易购网站建设的不足之处内容超出容器后 以…省略
当前效果
代码
templatediv classbox有志者#xff0c;事竟成#xff0c;破釜沉舟#xff0c;百二秦关终属楚; 有心人#xff0c;天不负#xff0c;卧薪尝胆#xff0c;三千越甲可吞吴/div
/templa…内容超出容器后 以…省略
当前效果
代码
templatediv classbox有志者事竟成破釜沉舟百二秦关终属楚; 有心人天不负卧薪尝胆三千越甲可吞吴/div
/templatestyle langscss
.box {width: 150px;padding: 20px;margin: 50px auto;color: #fff;background-color: cornflowerblue;
}
/style单行省略
需求 使所有文本在一行显示显示不下就以 ... 形式省略
效果
代码
.box {width: 150px;padding: 20px;margin: 50px auto;color: #fff;background-color: cornflowerblue;p {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
}核心代码
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;多行省略
需求 使文本只显示 2 行显示不下就以 ... 形式省略
效果
代码
.box {width: 150px;padding: 20px;margin: 50px auto;color: #fff;background-color: cornflowerblue;p {display: -webkit-box !important;overflow: hidden;word-break: break-all;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
}核心代码
display: -webkit-box !important;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;-webkit-line-clamp 代表行数限制内容最多出现几行
