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

发布时间：2018-10-04 01:43:42 所属栏目：经验来源：站长网

导读：之前一直以为单行文本溢出追加省略号没法兼容所有浏览器，经元泉同志提点，顺利解决： .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>
提示：可修改后代码再运行!

（编辑：重庆站长网）

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

罗永浩不是老赖了	对于元宇宙，大佬们是
元宇宙大爆炸，虚拟偶	实时音视频，产业拐点