卡片布局以及鼠标悬浮展示全部前端

界面要求

不论视口大小每行显示6个元素，文字超出长显示省略号（暂定显示一行）
当鼠标悬浮的时候，展示所有文字，卡片向下延展直到能够完全显示文字

先看效果图

文章图片

分析

第一个要求我们可以用flex布局实现，css控制文字效果
第二个，我们可以采用外层嵌套div的方式控制，当鼠标悬浮的时候展示内层div

看一下代码实现吧
代码展示

html元素

less控制每行布局

flex: 0 1 auto; (默认值为0 1 auto, 后两个属性可选)
三个参数分别是:

flex-grow(放大比例),

flex-shrink(缩小比例)

flex-basis(占据主轴的空间)

.card_view { display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: flex-start; &-card { border-radius: 8px; cursor: pointer; height: 36px; position: relative; margin-left: 16px; margin-top: 16px; } &-item { flex: 0 0 16.66%; } }

全局样式：

//文本溢出省略号 .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .clamp_fun(@line: 1) { overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: @line; } .clamp_1 { .clamp_fun(1); } .clamp_2 { .clamp_fun(2); } .clamp_3 { .clamp_fun(3); }