详解flex实现左右布局中按钮溢出隐藏效果

最新推荐文章于 2024-07-16 18:15:42 发布

kingarst

最新推荐文章于 2024-07-16 18:15:42 发布

阅读量1.4k

点赞数

分类专栏： # css布局样式

原文链接：https://www.jb51.net/css/648843.html

版权

css3 前端 css

css布局样式专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近在开发公司项目的时候UI设计稿给了这么一个设计(这里是我手动画的草图)：

看这效果，第一感觉很简单，flex布局，左边宽度自适应，右边固定宽度。

关于文本溢出隐藏的方式：

/* 单行文本 */
.text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    /*当然还需要加宽度width属来兼容部分浏览。*/
}

/* 多行文本 */
.text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    /* -webkit-line-clamp 显示行数 */
}

备注：文章内容取自脚本之家ID为pingan8787 的大佬，这里只copy关键代码。原网页https://www.jb51.net/css/648843.html

（如有冒犯，私我删除，谢谢）