Maison  >  Article  >  interface Web  >  Comment masquer la partie excédentaire du texte

Comment masquer la partie excédentaire du texte

php中世界最好的语言
php中世界最好的语言original
2018-03-22 11:35:202329parcourir

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn