-webkit-line-clamp

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

La propriété CSS -webkit-line-clamp permet de limiter l'affichage du contenu d'un bloc à un nombre donné de lignes.

Cette propriété fonctionne uniquement si display vaut -webkit-box ou -webkit-inline-box et si -webkit-box-orient vaut vertical.

Dans la plupart des cas, on utilisera également overflow avec la valeur hidden, afin de masquer le contenu qui dépasse (plutôt que d'afficher une ellipse en dehors de la boîte).

Lorsqu'on applique ce style à une ancre, la troncature pourra intervenir au milieu du texte (et pas nécessairement à la fin).

Note : Au départ, cette propriété était implémentée dans WebKit avec quelques problèmes. Elle a été standardisée à des fins de support pour les sites historiques. Le module de spécification CSS Overflow Module Level 3 définit également une propriété line-clamp qui doit remplacer -webkit-line-clamp.

Syntaxe

css
/* Valeurs avec un mot-clé */
-webkit-line-clamp: none;

/* Valeurs entières */
/* Type <integer> */
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/* Valeurs globales */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: unset;
none

Cette valeur indique que le contenu ne sera pas rogné.

<integer>

Cette valeur indique le nombre de lignes après lequel tronquer le contenu. Cette valeur doit être supérieure à 0.

Définition formelle

Valeur initialenone
ApplicabilitéBlock containers except multi-column containers
Héritéenon
Valeur calculéecomme spécifié
Type d'animationun entier

Syntaxe formelle

line-clamp = 
none |
<integer [1,∞]> || <'block-ellipsis'>

<block-ellipsis> =
none |
auto |
<string>

Exemples

HTML

html
<p>
  Dans cet exemple <code>-webkit-line-clamp</code> vaut <code>3</code>, ce qui
  signifie que le texte sera rogné après trois lignes. Une ellipse sera affichée
  au n ellipsis will be shown at the point where the text is clamped.
</p>

CSS

css
p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Résultat

Spécifications

Specification
CSS Overflow Module Level 4
# propdef-line-clamp

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
line-clamp
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Voir aussi