文字溢出省略和溢出换行

文字溢出省略:

div{
overflow:hidden;
text-overflow:ellipsis; /*文字溢出显示省略号*/
white-space:nowrap; /*文字不换行*/
}

多行文本溢出显示省略号

div{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;//对象作为弹性伸缩盒子模型展示
    -webkit-line-clamp: 2;//限制一个块元素显示的文本的行数
    -webkit-box-orient: vertical;//设置或检索伸缩盒对象的子元素的排列方式
}

兼容PC端webkit内核浏览器以及大部分移动端浏览器

其他方式:https://www.html.cn/archives/5206/

你可能感兴趣的:(文字溢出省略和溢出换行)