web-dev-qa-db-fra.com

Lignes de serrage sans '-webkit-line-clamp'

Dans le bon vieux temps, il existait une astuce dans webkit pour le serrage de lignes en utilisant du CSS pur:

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Bien que cette syntaxe coexiste avec bonheur avec le display: -webkit-flex la syntaxe, dans tous les navigateurs Web modernes, est considérée comme obsolète.

Ma question est:

Comment puis-je obtenir un blocage de ligne en CSS pur et sans le _ '-webkit-line-clamp' tour?

csswebkitflexbox
24
shabunc

La seule solution multi-navigateur consiste à utiliser js afaik. Plusieurs solutions au problème de la troncature multiligne avec Ellipsis sont discutées ici: http://css-tricks.com/line-clampin/

Je les déteste tous, mais bienvenue dans le développement web.

27
Jethro Larson

Essayez d'utiliser ce CSS

.line-clamp:after {
background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: 0;
content: "...";
font-weight: bold;
padding: 0 20px 1px 45px;
position: absolute;
right: 0;}

.line-clamp {
height: 5.6em;
line-height: 1.4em;
overflow: hidden;
position: relative;}
8
Vipin

La spécification CSS Overflow Level 3 définit une propriété line-clamp standard (sans les caprices de la solution préfixée ´-webkit-`). Malheureusement, aucun des principaux navigateurs ne prend encore en charge cette fonctionnalité.

Donc, pour l'instant, vous devrez utiliser un polyfill pour les navigateurs qui ne prennent pas en charge cette propriété. CSS-Tricks décrit trois solutions , chacune ayant ses avantages et ses inconvénients.

  1. Utilisation de CSS standard

    .fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}

.fade::after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

    Avantages: Tous les navigateurs actuels le prennent en charge. Inconvénients: il y a un fondu au lieu d'une ellipse et nécessite que les hauteurs soient définies manuellement.

  2. Utilisation de la valeur -o-Ellipsis-lastline D'Opera

    .last-line {
  height: 3.6em; /* exactly three lines */
  text-overflow: -o-Ellipsis-lastline;
}

    Avantages: afficher comme prévu. Inconvénients: ne fonctionne que dans les anciennes versions de Opera et nécessite que la hauteur soit définie manuellement

  3. Utilisation de JavaScript ( Clamp.js )

    var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});

    Avantages: afficher comme prévu et est flexible grâce à différentes options. Inconvénients: nécessite une bibliothèque JS pour fonctionner et est moins performant que les solutions CSS.

3
Sebastian Zartner