web-dev-qa-db-fra.com

Pourquoi le serrage de ligne webkit ne fonctionne pas dans Firefox?

J'utilise cette pince de ligne webkit, elle fonctionne dans Chrome, mais pas dans Firefox. Voici le code:

{
overflow: hidden;
text-overflow: Ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4; /* number of lines to show */
line-height: X;        /* fallback */
max-height: X*4;       /* fallback */
}

Comment dois-je également le faire fonctionner sur Firefox?

htmlcssfirefox
22
uklp

Mise à jour importante:

À partir de Firefox version 68 Firefox prend en charge -webkit-line-clamp !!

Extrait de démonstration ( caniuse )

p {
  width: 300px;
  border: 2px solid green;
  padding: 0.5em 0.5em 0 0.5em;
  overflow: hidden;
  text-overflow: Ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* number of lines to show */
}
<p>When the CSS -webkit-line-clamp property is applied to a block of text (e.g., a paragraph), the text is limited to the specified number of lines (1 or more), and an Ellipsis character (…) is added to the end of the last visible line. - see <a href="https://webplatform.news/issues/2019-05-17">webplatform.news</a>

Bien que Firefox utilise le moteur de rendu Gecko qui utilise le préfixe du fournisseur -moz-, Depuis la version 49, Firefox a décidé d'ajouter la prise en charge de plusieurs préfixes -webkit- = et interfaces spécifiques à WebKit

Remarque: Brouillon de l'éditeur de module de débordement CSS niveau inclut une propriété officielle line-clamp - qui remplacera probablement la propriété propriétaire -webkit-line-clamp.

Réponse originale

Tu ne peux pas. -webkit-line-clamp Est destiné aux navigateurs qui utilisent le webkit. Firefox fonctionne sur gecko et utilise le préfixe du fournisseur: -moz-

Si vous êtes intéressé - vous pouvez jeter un oeil à ma réponse ici : a line-clamp avec fade-out fallback fiddle qui ajoute une solution de contournement d'effet de fondu (à la place d'Ellipsis) pour les navigateurs non-webkit.

29
Danield

Dans Firefox, -webkit-line-clamp ne fonctionne pas

Voici un code javascript qui fonctionne bien
http://codepen.io/nilsynils/pen/zKNpkm?editors=1111

const containers = document.querySelectorAll('.container');
Array.prototype.forEach.call(containers, (container) => {  // Loop through each container
    var p = container.querySelector('p');
    var divh = container.clientHeight;
    while (p.offsetHeight > divh) { // Check if the paragraph's height is taller than the container's height. If it is:
        p.textContent = p.textContent.replace(/\W*\s(\S)*$/, '...'); // add an Ellipsis at the last shown space
    }
})
1
Lsb

/ ---- pince de ligne --- /

.line-clamp {
    position: relative;
    height: 2.7em; 
    overflow: hidden;
}
.line-clamp:after {
    background: $white;
    bottom: 0;
    position: absolute;
    right: 0;
    float: right;
    content: '\2026';
    margin-left: -3rem;
    width: 1rem;
}

@supports (-webkit-line-clamp: 2) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        / autoprefixer: off /
        -webkit-box-orient: vertical; 
        / autoprefixer: on /
        max-height:3.6em; 
        height: auto;
    }
    .line-clamp:after {
        display: none;
    }
}

/ ---- fin de la pince de ligne --- /

0
Snehal Jadhav