多行文本溢出显示省略号 多行文本折行省略并存
2016-07-18 18:00
435 查看
最近在项目的制作过程中遇到超出需要折行的问题
如果是一行超出
或者第N行要省略该如何解决呢?如果是两行显示,第一行折行,第二行需要超出省略该如何实现呢?
当然也需要设置高度来配合显示
解决方案2 css 的伪类实现
对要显示的文字进行相对定位
对省略号进行绝对定位
demo https://jsfiddle.net/mayufo/xv3wub7s/1/
解决方案3:js解决方法
Clamp.js 这个就不具体展开了
可以参考demo http://codepen.io/feiwen8772/pen/AckqK
http://www.w3school.com.cn/tiy/t.asp?f=css3_box-orient
http://www.520ued.com/article/54192b4b8d31c11e3b000400
如果是一行超出
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
问题
如果是两行显示,第一行折行,第二行需要超出省略该如何实现呢?或者第N行要省略该如何解决呢?如果是两行显示,第一行折行,第二行需要超出省略该如何实现呢?
解决
解决方案1 css 的不规则属性解决-webkit-line-clamp是一个不规则属性,不出现在css 草案中。用来实现块级元素显示几行,它需要与其他元素组合使用
display:-webkit-box; -webkit-box-orient: vertical; // 从上向下垂直排列子元素。设置或检索伸缩盒对象的子元素的排列方式 。 text-overflow: ellipsis; //文本溢出 用省略号显示 -webkit-line-clamp: 2; overflow: hidden;
当然也需要设置高度来配合显示
解决方案2 css 的伪类实现
对要显示的文字进行相对定位
对省略号进行绝对定位
p { position: relative; line-height: 1.4em; height: 4.2em // 1.4 *3 显示三行的 所有高度是行高的三倍 overflow: hidden; } p::after { content: '...', position: absolute, bottom: 0; right: 0; padding: 5px; }
demo https://jsfiddle.net/mayufo/xv3wub7s/1/
解决方案3:js解决方法
Clamp.js 这个就不具体展开了
可以参考demo http://codepen.io/feiwen8772/pen/AckqK
参考
http://www.css88.com/webkit/-webkit-appearance/http://www.w3school.com.cn/tiy/t.asp?f=css3_box-orient
http://www.520ued.com/article/54192b4b8d31c11e3b000400
相关文章推荐
- 中项培训感想
- 变量·数据类型·变量使用规则
- 安卓 开源库
- display:table-cell
- GB28181国标2016版本协议文档(报送稿)解读(二)
- spring 事务管理的学习总结
- Luhn算法验证信用卡的合法性
- 调用系统的相机
- Django 1.6.5模板搭建
- TV焦点的获取
- 4.3.1 练习防备野指针的用法和常用编程技巧
- Android开发中如何监听用户的home键
- 配置环境变量后 vs2010工程打开报错
- 这是我的第一篇CSDN博客
- 查看签名信息
- Eclipse没有编译class文件
- MyBatis调用存储过程
- 评估邮件网关是否优质的五个标准
- ios app网址说明
- C# 禁止修改已装箱了的值类型的字段值,但是可以通过接口的方式实现