CSS exceeds the specified width of the text and uses ellipses to replace it and the text does not wrap.

This article mainly introduces the relevant information on using ellipses to replace CSS when the text exceeds the specified width and the text not wrapping. I think it is very practical, so I would like to share it on the Script Home platform for your reference.

General text truncation (applies to inline and block):

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

Definition of text overflow for table:

Display ellipsis for table out of range

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

Please note that this CSS style only works on a single line of text. If you want to use it on multiple lines, only the first line will work.

Only IE will have "..." in this way of writing. The text in other browsers will be hidden when it exceeds the specified width.

The above is an introduction to the use of ellipses to replace CSS when the text exceeds the specified width and the text not to wrap. I hope it will be helpful to everyone. At the same time, I also thank you very much for your support of the PHP Chinese website!

The above is the detailed content of CSS exceeds the specified width of the text and uses ellipses to replace it and the text does not wrap.. For more information, please follow other related articles on the PHP Chinese website!