一般在我们写网站前端时,文章标题和文章描述为了好看和排列整齐经常需要用到这个功能。
显示一行
.text1{
display: inline-block; //设置inline-block属相
white-space: nowrap;//强制不换行
width: 100%;
overflow: hidden;//隐藏超出部分
text-overflow:ellipsis;//显示“……”
}
显示多行
.text2{
word-break:break-all;
display:-webkit-box;//将对象作为弹性伸缩盒子模型显示
-webkit-line-clamp:2;//要显示的行数
-webkit-box-orient:vertical;
overflow:hidden;//超出的文本隐藏
}