Comment masquer la partie excédentaire du texte

Cette fois je vais vous montrer comment masquer la partie excédentaire de texte, et quelles sont les précautions pour masquer la partie excédentaire de texte Voici un cas pratique, jetons un oeil.

Masquer le texte en excès, résumer deux méthodes.

1. Masquage d'une seule ligne

code HTML

<p class="mi">当文字超过范围的时候，超出部分会隐藏起来。</p>

Code CSS

.mi {
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}

2. Masquage multi-lignes

Code HTML

<p class="mi">当文字超过范围的时候，超出部分会隐藏起来。可以设置第几行开始隐藏。</p>

code CSS

.mi {
    width: 200px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article . Veuillez prêter attention aux choses plus excitantes. Autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

CSS pour implémenter un cube translucide 3D

Deux méthodes pour implémenter une barre de progression avec CSS3

Plusieurs façons d'implémenter le placement du pied de page en CSS

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!