CSS dépasse la largeur spécifiée du texte et utilise des points de suspension pour le remplacer et le texte ne s'enroule pas.

Cet article présente les informations pertinentes sur l'utilisation d'ellipses pour remplacer CSS au-delà de la largeur spécifiée du texte et sans envelopper le texte. Je pense que c'est très pratique, et je le partage par la présente sur le Script. Plateforme d'accueil pour votre référence.

Troncation générale du texte (s'applique à l'inline et au bloc) :

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

Pour tableau débordement de texte définition :

Pour tableau hors plage, affichage des points de suspension

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

Ce que vous devez noter, c'est que ce style CSS ne fonctionne que sur une seule ligne de texte. Si vous souhaitez l'utiliser sur plusieurs lignes, uniquement sur la première ligne. fonctionnera.

Seul IE aura "..." dans cette façon d'écrire Les autres navigateurs masqueront le texte lorsqu'il dépasse la largeur spécifiée.

Ce qui précède est une introduction à l'utilisation des ellipses lorsque CSS dépasse la largeur spécifiée du texte et que le texte ne s'enroule pas. J'espère que cela sera utile à tout le monde. Je vous remercie également beaucoup pour votre soutien. le site PHP chinois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!