纯CSS单行文本溢出追加省略号代码

发布时间：2018-10-03 18:07:03 所属栏目：创业来源：站长网

导读：之前一直以为单行文本溢出追加省略号没法兼容所有浏览器，经元泉同志提点，顺利解决： .box { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 样式代码，四个属性都是必须的，并且宽度必须设在当前容器上，父容器定宽

之前一直以为单行文本溢出追加省略号没法兼容所有浏览器，经元泉同志提点，顺利解决：

纯CSS单行文本溢出追加省略号代码

.box {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

样式代码，四个属性都是必须的，并且宽度必须设在当前容器上，父容器定宽无效：

测试 IE6、IE7、IE8、IE9、Chrome、Firefox 均支持。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>text overflow ellipsis - veryhuo.com</title> <style> .box { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <h1>text overflow ellipsis</h1> <div class="box">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

穗港科研团队首建真正	邓丽君引爆虚拟人板块
比亚迪成立电池公司，	自称新势力2.0，电动屋