CSS换行文本溢出显示省略号,多行
2016-05-24 19:18
645 查看
首先,div部分
然后,css部分
1.单行
2.多行
主要是用到了-webkit-line-clamp。由于是-webkit,很幸运的移动端的页面可以做兼容。
pc端的话,Firefox、IE、edge不可用,chrome、safari、opera可用。
<body> <div>多行的显示该如何解决呢,后面经过一番google后,我找到了chrome的一个API可以解决上面提到的需求-webkit-line-clamp</div> </body>
然后,css部分
1.单行
div { width: 150px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; background-color: lightcoral; }
2.多行
主要是用到了-webkit-line-clamp。由于是-webkit,很幸运的移动端的页面可以做兼容。
pc端的话,Firefox、IE、edge不可用,chrome、safari、opera可用。
相关文章推荐
- css3 -- 媒体查询
- css3 media媒体查询器用法总结 兼容ie8以下的方法
- 2016年CSS基础语法汇总-小白必备 很简单哦~
- CSS -webkit-gradient 属性简介
- HTML+CSS基础(七):CSS选择器
- css3 -- 浏览器支持
- CSS伪类、伪元素
- css sprites 优缺点
- CSS变化宽度布局
- About css sprites
- css属性继承和优先级
- CSS固定宽度布局
- css垂直水平居中小技巧
- XPath和CSS 3的解析器比较
- HTML+CSS基础(六):CSS样式与属性
- css中网页图片下方多出几像素问题分析
- 挂多个css还是新建class-多用组合,少用继承
- Webkit CSS实现
- css浮动
- css实现正方形div的3种方式