Comment limiter les lignes de texte avec CSS uniquement

Limiter la quantité de texte dans un élément est une exigence courante en matière de conception de sites Web. Vous verrez souvent un article avec un extrait de trois ou quatre lignes avec un bouton qui vous permet de développer le texte intégral.

Vous pouvez créer cette conception en utilisant une combinaison de CSS et de JavaScript. Mais vous pouvez également le faire en utilisant uniquement CSS. Découvrez deux façons de limiter le texte dans une boîte et comment vous pouvez créer un bouton de développement dynamique en utilisant uniquement CSS.

La technique du Webkit

Créez un dossier vide et modifiez deux fichiers à l'intérieur: index.html et style.css. À l'intérieur de index.html fichier, créez un squelette HTML :

html>
<htmllangue="fr">
<diriger>
<titre>Documenttitre>
<lienrel="feuille de style"href="style.css">
diriger>
<corps>
corps>
html>

Un lien dans le section, à la

style.css file, garantit que tout CSS que vous ajoutez à ce fichier s'appliquera à cette page. Ensuite, collez le balisage HTML suivant dans le balises dans index.html:

<sectionclasse="groupe de cartes">
<articleclasse="carte">
<h2>Article 1h2>
<pclasse="texte de coupure">
 Le texte de 300 mots va ici
p>
<saisirtaper="case à cocher"classe="développer-btn">
article>
<articleclasse="carte">
<h2>Article 2h2>
<pclasse="texte de coupure">
 Le texte de 200 mots va ici
p>
<saisirtaper="case à cocher"classe="développer-btn">
article>
<articleclasse="carte">
<h2>Article 1h2>
<pclasse="texte de coupure">
 Le texte de 100 mots va ici
p>
<saisirtaper="case à cocher"classe="développer-btn">
article>
section>

La structure de ce code HTML est simple, mais il utilise toujours balisage sémantique pour l'accessibilité. Un élément section contient trois éléments article. Chaque article comprend un titre, un paragraphe et un élément d'entrée. Vous utiliserez CSS pour styliser chaque section d'article dans une carte.

En attendant, votre page ressemblera à ceci :

À partir de l'image ci-dessus, vous pouvez voir différentes longueurs de texte dans chaque paragraphe. 300 mots dans le premier, 200 mots dans le second et 100 dans le troisième.

L'étape suivante consiste à commencer à styliser la page en ajoutant du CSS au style.css déposer. Commencez par réinitialiser la bordure du document et donnez au corps une couleur d'arrière-plan blanche :

*, *::avant, *::après {
dimensionnement de la boîte: border-box;
}
corps {
arrière-plan: #f3f3f3;
débordement: caché;
}

Ensuite, transformez l'élément avec la classe card-group en un conteneur de grille à trois colonnes. Chaque section d'article occupe une colonne :

.card-group {
afficher: grille;
grille-modèle-colonnes: répéter(3, 1en);
écart: .5rem;
aligner les éléments: flex-start;
}

Stylez chaque section d'article comme une carte avec une couleur de fond blanche et une bordure noire légèrement ronde :

.carte {
arrière-plan: blanc;
rembourrage: 1rem;
frontière: 1pixelssolidenoir;
rayon de bordure: .25em;
}

Enfin, ajoutez quelques marges :

h2, p {
marge: 0;
}
h2 {
marge inférieure: 1rem;
}

Enregistrez le fichier et vérifiez votre navigateur. La page devrait ressembler à la page montrée dans l'image ci-dessous :

L'étape suivante consiste à réduire le nombre de lignes pour chaque texte à 3. Voici le CSS pour cela :

.cuttoff-text {
--max-lignes: 3; 
débordement: caché;

afficher: -boîte-webkit; 
-webkit-box-orient: vertical;
-webkit-line-pince: var(--max-lignes);
}

Commencez par régler une variable CSS, max-lines, à 3 et masquant le contenu débordant. Ensuite, réglez l'affichage sur -boîte-webkit et serrez la ligne à 3.

L'image suivante montre le résultat. Chaque carte affiche une ellipse sur la troisième ligne de texte :

Cette technique peut être assez délicate à mettre en place. Si vous omettez une propriété, tout va se casser. Un autre inconvénient est que vous ne pouvez pas utiliser une propriété d'affichage autre que --boîte-webkit. Par exemple, vous voudrez peut-être utiliser Grid ou Flexbox. Pour ces raisons, la technique suivante est meilleure.

Une approche plus flexible pour limiter le nombre de lignes dans le texte

Cette technique permet de faire la même chose que l'approche webkit, avec les mêmes résultats. Mais la grande différence est que vous disposez d'une grande flexibilité car vous définissez vous-même la hauteur. De plus, vous pouvez utiliser n'importe quelle propriété d'affichage ou n'importe quelle option de style que vous préférez.

Pour commencer, remplacez le bloc CSS par .cutoff-text avec ça:

.cuttoff-text {
--max-lignes: 5;
--hauteur de la ligne: 1.4;
hauteur: calc(var(--max-lignes) * 1em * var(--hauteur de la ligne));
hauteur de la ligne: var(--hauteur de la ligne);
position: relatif;
}

Définir une hauteur de ligne est important car vous devez en tenir compte lors de la détermination de votre taille. Pour obtenir la hauteur, vous multipliez la hauteur de ligne par la taille de votre police et le nombre de lignes.

Nous ajoutons position: relative car nous en avons besoin pour ajouter l'effet de fondu. Ajoutez le CSS suivant pour compléter l'effet :

.cuttoff-text::avant {
contenu: "";
position: absolu;
hauteur: calc(2em * var(--hauteur de la ligne));
largeur: 100%;
bas: 0;
événements-pointeur: aucun;
arrière-plan: gradient linéaire(pourbas, transparent, blanc);
}

Le CSS ci-dessus brouille la dernière ligne de texte de chaque carte. Vous pouvez obtenir un effet de fondu en utilisant le arrière-plan propriété et un gradient. Vous devez définir événements-pointeur pour aucun pour s'assurer que l'élément n'est pas sélectionnable.

Voici le résultat :

Cette technique a obtenu le même résultat que la précédente (plus le flou à la fin). Mais vous obtenez plus de flexibilité pour utiliser d'autres types de mises en page et de conceptions.

Ajout d'un bouton de développement et de réduction dynamique

L'ajout d'un bouton développer/réduire rend les cartes plus réalistes et interactives. Avec ce modèle, vous développez le contenu en cliquant sur le Développer bouton, après quoi le texte devient Effondrement. Ainsi, le texte du bouton bascule entre "Développer" et "Réduire" lorsque vous cliquez dessus. De plus, le reste du contenu s'affiche et se cache dans chaque état respectif.

Vous avez déjà défini un saisir élément dans votre HTML. Cet élément vous servira de bouton. Pour styliser cette entrée dans un bouton, incluez le CSS suivant dans votre feuille de style :

.expand-btn {
apparence: aucun;
frontière: 1pixelssolidenoir;
rembourrage: .5em;
rayon de bordure: .25em;
le curseur: aiguille;
marge supérieure: 1rem;
}

Lorsque vous passez la souris sur le bouton, vous souhaitez modifier la couleur de fond :

.expand-btn:flotter {
Couleur de l'arrière plan: #ccc;
}

Maintenant, le CSS pour changer le texte lorsque l'entrée est vérifiée :

.expand-btn::avant {
contenu: "Développer"
}
.expand-btn:vérifié::avant {
contenu: "Effondrement"
}

Maintenant, lorsque vous cliquez sur le bouton/l'entrée, le texte passe de Développer pour Effondrement. Mais le contenu lui-même ne se développera pas encore. Pour qu'il le fasse lorsque vous cliquez sur le bouton, ajoutez le CSS suivant :

.cuttoff-text:a(+.expand-btn:vérifié) {
hauteur: auto;
}

Cet exemple utilise le has() Sélecteur CSS pour cibler l'élément. Avec ce code, vous dites que si la zone de texte de coupure a un bouton d'expansion coché, la hauteur de la carte doit être auto (ce qui l'agrandit).

Voici le résultat :

Autres trucs et astuces CSS à apprendre

Cet article a démontré deux méthodes différentes pour limiter le nombre de lignes dans une boîte à l'aide de CSS. Nous avons même ajouté un bouton pour développer/réduire le contenu sans écrire une seule ligne de JavaScript.

Mais il existe des tonnes d'autres trucs et astuces en CSS. Ces conseils vous offrent un moyen créatif d'obtenir les mises en page souhaitées sans nuire aux performances, à la lisibilité ou à l'accessibilité.