La partie dépassant la limite CSS des caractères affichés est représentée par une ellipse.

Afin de garantir que la page soit propre et belle, dans de nombreux cas, nous devons souvent masquer le texte qui dépasse la longueur. Ceci est couramment utilisé dans les éléments de liste, les titres, les noms, etc.

(1). Le texte dépasse une ligne, omettez la partie excédentaire et affichez '...'

Si cela arrive fréquemment, vous pouvez choisir un nom de classe qui convient à la fonction pour la réutilisation. .

.line-limit-length {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...
}
<p class="item">
<p class="line-limit-length">最新消息：神秘地球黑洞深不可测，不停吸入周围海水。</p>
<i class="icon icon-arrow-go"></i> //图标字体
</p>

(2) Vous pouvez donner une limite de largeur de conteneur, et la partie excédentaire est omise

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!