WebKit的CSS扩展属性 该方法适用于WebKit浏览器及移动端;
-webkit-line-clamp 限制在一个块元素显示文本的行数 需要组合其他的WebKit属性
常见结合属性display: -webkit-box; 必须结合的属性 将对象作为弹性伸缩盒子模型显示
-webkit-box-orient 必须结合的属性 设置或检索伸缩盒对象的子元素的排列方式
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{
content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
div {
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
style="box-shadow: rgb(170, 170, 170) 0px 0px 14px 0px;"
CSS3是CSS技术的升级版本2001年5月23日W3C完成了CSS3的工作草案 主要包括盒子模型 列表模块 超链接方式 语言模块 背景和边框 文字特效 多栏布局等模块
块元素垂直居中问题采用 flex 解决。
行内元素垂直居中问题解决如下:
1)单行
该元素 css 属性 line-height 的值与该元素的父级元素 css 属性 height 一致即可。
2)多行
设置该元素 css 属性:display: table-cell; vertical-align: middle;,还需设置该元素的父级元素 css 属性:display: table;。
感谢您的支持,我会继续努力的!
支付宝扫一扫,即可进行扫码打赏哦
2678css省略号
WebKit的CSS扩展属性 该方法适用于WebKit浏览器及移动端;
-webkit-line-clamp 限制在一个块元素显示文本的行数 需要组合其他的WebKit属性
常见结合属性
display: -webkit-box; 必须结合的属性 将对象作为弹性伸缩盒子模型显示
-webkit-box-orient 必须结合的属性 设置或检索伸缩盒对象的子元素的排列方式
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{
content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
div {
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
2660定义右上角边框的形状 3
style="box-shadow: rgb(170, 170, 170) 0px 0px 14px 0px;"
2625CSS3 教程
CSS3是CSS技术的升级版本2001年5月23日W3C完成了CSS3的工作草案 主要包括盒子模型 列表模块 超链接方式 语言模块 背景和边框 文字特效 多栏布局等模块
2535CSS3 弹性盒子
块元素垂直居中问题采用 flex 解决。
行内元素垂直居中问题解决如下:
1)单行
该元素 css 属性 line-height 的值与该元素的父级元素 css 属性 height 一致即可。
2)多行
设置该元素 css 属性:display: table-cell; vertical-align: middle;,还需设置该元素的父级元素 css 属性:display: table;。
1810CSS :before 选择器
radio选择框css美化