css文字单行/多行超出显示省略号...

2022-12-09,,,,

css文字单行/多行超出显示省略号...

项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到。

单行超出

  .oneline {
width:300upx; /*宽度一定要设置*/
overflow: hidden; /*文本超出隐藏*/
text-overflow: ellipsis; /*文本超出显示省略号*/
white-space: nowrap; /*超出的空白区域不换行*/
}

多行超出

.twoline {
width:300upx; /*宽度一定要设置*/
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all; /*允许在单词内换行,防止有字母时候出问题*/
display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
-webkit-line-clamp: 2; /*多行在这里修改数字即可*/
-webkit-box-orient: vertical; /*从上到下垂直排列子元素*/
}

css文字单行/多行超出显示省略号...的相关教程结束。

《css文字单行/多行超出显示省略号....doc》

下载本文的Word格式文档,以方便收藏与打印。