CSS文字强制不换行 一行显示文字

一般的文字截断(适用于内联与块):

.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会有“...”,其它的浏览器文本超出指定宽度时会隐藏。                    


原文链接:HelloWeb前端网 » CSS文字强制不换行 一行显示文字 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享