CSS高级技巧之文字溢出省略号显示

最新推荐文章于 2024-08-03 20:42:48 发布

辣味蓓蓓酱

最新推荐文章于 2024-08-03 20:42:48 发布

阅读量145

点赞数

文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_43623147/article/details/111142565

版权

一、单行文本溢出显示省略号

需满足以下三个条件：

.div { 
    width: 150px;
    height: 80px;
    background-color: pink;
    /* 1.如果文字显示不开也必须强制一行内显示 */
    white-space: nowrap;
    /* 2.溢出的部分隐藏起来 */
    overflow: hidden;
    /* 3.文字溢出用省略号来显示 */
    text-overflow: ellipsis;
}

二、多行文本溢出显示省略号

多行文本溢出显示省略号，有较大兼容性问题，适用于webkit浏览器或移动端。

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