css 实现单行或者多行超出后显示...
2015-11-11 10:47
471 查看
1.单行多处后显示...
css
2.多行多处后显示...
css:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
注:
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
css
<span style="font-size:18px;">.demo-p{ width: 200px; font-size: 20px; <em>overflow: hidden; text-overflow:ellipsis; white-space: nowrap;</em> }</span>html
<span style="font-size:24px;"><p class="demo-p">我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦</p></span>
2.多行多处后显示...
css:
<span style="font-size:24px;">.demo-p1{ width: 200px; font-size: 20px; <em>display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;</em> }</span>html:
<span style="font-size:24px;"> <p class="demo-p1">我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦我是用来测试的哦</p></span>
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
注:
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
相关文章推荐
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- Web布局连载——两栏固定布局(五)
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- [div+css]晒晒最新制作专题推广页模板
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- 如何使用CSS3画出一个叮当猫