如何通过CSS自动隐藏超出宽度的字不带省略号

.text-overflow {

display:block;/*内联对象需加*/

width:31em;

word-break:keep-all;/* 不换行 */

white-space:nowrap;/* 不换行 */

overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */

text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/

}

扩展资料：

上面是不带省略号，反之显示省略号

多行文本可以使用如下样式:

.intwoline {

display: -webkit-box !important;

overflow: hidden;

text-overflow: ellipsis;

word-break: break-all;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

}

现在的浏览器 都不一样, 我试了, overflow:hidden时 的确不带 "...",
记得以后我初学的时候, 有隐藏的部分时,是会带 "..."的, 而且,我刚才用的4种浏览器(ie8, ff, opera, chrome) 浏览overflow:hidden的情况, 虽然3 个都是标准浏览器,ie8也已经很接近,但不同的浏览器浏览效果还是不一样.

一般的文字截断（适用于内联与块）：

.text-overflow {
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

对于表格文字溢出的定义：

table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
有...是ie的bug，在其他浏览器里不会有...

overflow:hidden