发表于： 2018-04-28 23:05:30
2 490
今天完成的事情：完善任务6，任务7页面2的架构
明天计划的事情：希望完成任务7啊啊啊
遇到的问题：暂时没有
收获：
1)grid布局
Grid 布局是网站设计的基础，CSS Grid 是创建网格布局最强大和最简单的工具。CSS Grid 今年也获得了主流浏览器（Safari，Chrome，Firefox，Edge）的原生支持。任务7的投票选项就是用grid布局做的。
CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是实际的 grid(网格)，items 是 grid(网格) 内的内容。
最简单易上手的grid布局教程=> https://juejin.im/entry/5a23510f6fb9a0452a3c239f
2)CSS实现单行、多行文本溢出显示省略号
单行
语法
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap；
示例
文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号
多行
1.直接用css属性设置(只有-webkit内核才有作用)
语法
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
移动端浏览器绝大部分是WebKit内核的，所以该方法适用于移动端；
-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
display: -webkit-box 将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis 以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。
示例
文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略
返回列表
评论