Sample code for hiding and displaying CSS text as ellipses after it exceeds the specified width

The following editor will bring you a sample code for hiding and displaying CSS text as an ellipsis after it exceeds the specified width. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor and take a look.

General text truncation (applicable to inline and block):

.text-overflow {     

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

  width:25em;     

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

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

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

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

}

For table text overflow Definition:

For table out of range display ellipses

table{     

   width:25em;     

   table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */

}   

td{   

  width:100%;     

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

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

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

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

}

##Code:

          AAAAAAAAAAAAABBBBBBBBBBBBBCCCCCCCCCCCCCCDDDDDDDDDDDD   

The above is the detailed content of Sample code for hiding and displaying CSS text as ellipses after it exceeds the specified width. For more information, please follow other related articles on the PHP Chinese website!