一般的文字截断（适用于内联与块）：
CSS Code复制内容到剪贴板
- .text-overflow {
-
- display:block;
-
- width:25em;
-
- word-break:keep-all;
-
- whitewhite-space:nowrap;
-
- overflow:hidden;
-
- text-overflow:ellipsis;
-
- }
对于表格文字溢出的定义：
对于表格超出范围显示省略号
CSS Code复制内容到剪贴板
- table{
-
- width:25em;
-
- table-layout:fixed;
-
- }
-
- td{
-
- width:100%;
-
- word-break:keep-all;
-
- whitewhite-space:nowrap;
-
- overflow:hidden;
-
- text-overflow:ellipsis;
-
- }
代码：
XML/HTML Code复制内容到剪贴板
- <style type="text/css">
- #div1{
- padding: 10px;
- width: 200px;
- height:30px;
- text-shadow: 3px 3px 3px #aaaaaa;
- border: 1px solid #999999;
- text-overflow: ellipsis;
- overflow: hidden;
- word-break: break-all;
- white-space: nowrap;
- }
- </style>
-
-
- <body>
- <div id="div1" title="AAAAAAAAAAAAABBBBBBBBBBBBBCCCCCCCCCCCCCCDDDDDDDDDDDD">
- AAAAAAAAAAAAABBBBBBBBBBBBBCCCCCCCCCCCCCCDDDDDDDDDDDD
- </div>
- </body>
以上这篇CSS文本超出指定宽度后隐藏并显示为省略号的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
原文地址：http://www.cnblogs.com/shouce/archive/2016/05/24/5522169.html
