文本超出盒子的内容用省略号代替
2015-06-30 10:50
148 查看
实现的方法:给div添加属性overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
overflow:hidden; 是让超出盒子的内容隐藏;
white-space:nowrap; 让盒子右端的内容不能换行显示,则盒子的内容就在水平方向上溢出了;
text-overflow:ellipsis;可以在盒子的末尾显示一个省略的符号“...”,但是这个属性只是在盒子中的内容在水平方向上超出盒子的范围时有效
例子:
css:
text-overflow:ellipsis;是IE浏览器所扩展出来的,被css3所接纳的一个属性;IE6以上浏览器、opera及safari浏览器支持
overflow:hidden; 是让超出盒子的内容隐藏;
white-space:nowrap; 让盒子右端的内容不能换行显示,则盒子的内容就在水平方向上溢出了;
text-overflow:ellipsis;可以在盒子的末尾显示一个省略的符号“...”,但是这个属性只是在盒子中的内容在水平方向上超出盒子的范围时有效
例子:
<div> 段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落 </div>
css:
div{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -webkit-text-overflow:ellipsis;//safari浏览器 -o- text-overflow:ellipsis;//opera浏览器 width:300px; border:1px solid #ccc; }
text-overflow:ellipsis;是IE浏览器所扩展出来的,被css3所接纳的一个属性;IE6以上浏览器、opera及safari浏览器支持
相关文章推荐
- Tiny对JDK有什么要求么?
- 20个大大节省你时间的HTML5开发工具
- 心门
- php读取excel中的时间转换问题
- How to install 3 nodes Nutanix Cluster in one ESXi 6.0 Server
- 如何学习编程的
- 摘自《解析极限编程-拥抱变化》
- 链表中倒数第k个结点
- Android View动画
- OSG安装配置入门
- 解题报告:硬币排成线 II
- Linux kernel map
- Android 从网络中获取图片
- 工作流实现会签
- 【DOS】进程相关
- C#日志类,实用.net日志操作类
- 自定义标签
- 初学oop
- MyBatis
- iOS Objective c 16进制字符串转为二进制数组