javascript - Comment le front-end Web détermine-t-il si un élément de contenu comporte deux lignes? (Lorsque la largeur de l'écran est différente)

Question

Existe-t-il un moyen de calculer le nombre de lignes occupées par un morceau de texte sur différentes tailles d'écran ?
< /p>

Comme le montre la figure, si le contenu dépasse deux lignes sous la largeur de l'écran du téléphone mobile de l'utilisateur, le texte intégral sera affiché, sinon le texte intégral ne sera pas affiché

Answer 1

Utilisez la disposition flexible dans le calque externe, définissez le nombre de lignes de hauteur ou donnez la hauteur maximale max-height dans le calque externe
Placez le texte en p dans le calque interne et affichez-le normalement

.outer {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.inner {
    display: block;
    oveflow: auto;
}

Structure HTML :

<p class="outer">
    <p class="inner">
        文本内容
    </p>
</p>
<p id="show-more"></p>

Alors jugez de la hauteur des deux :

if ($('.inner').height() > $('.outer').height()) {
    $('#show-more').show();
}

Cette fois, "Afficher plus" s'affiche

Answer 2

L'idée est de juger en fonction de la hauteur de la ligne. Une fois que la hauteur de la ligne est supérieure à 1 hauteur de ligne, cela signifie qu'il y a deux lignes de contenu. Voici le code :

html est le suivant :

    <p class="content">
      文本文本文本文本文本文本文本文本文本文本文本文本文本文本
      <a class="more" style="display:none">阅读全文</a>
    </p>

js est le suivant :

    const contentp = document.getElementsByClassName('content')[0];
    const style = window.getComputedStyle(contentp, null);
    const height = parseInt(style.height, 10);
    const lineHeight = parseInt(style.lineHeight, 10);
    if (height / lineHeight > 1) { //若行高大于1行，则显示阅读全文
      document.getElementsByClassName('more')[0].style.display = 'block';
    }

Le code n'est pas facile, veuillez l'aimer si vous l'aimez~

Answer 3

Ensuite, jugez la hauteur du rang

Answer 4

Le texte actuel doit avoir un dom séparé, obtenir sa hauteur et sa hauteur de ligne et les calculer dynamiquement

Answer 5

Pour donner une idée, vous pouvez définir la hauteur de ligne sur 20 px, puis une fois la page rendue, utilisez l'attribut offsetHeight du nœud en js, offsetHeight / 20est le nombre de lignes

Answer 6

utiliser

elem.getClientRects()

C'est ça