recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - web前端如何判断一段内容是否满两行?(屏幕宽度不同情况下)

有没有什么办法计算一段文字在不同大小屏幕下占用的行数?

如图,如果在用户手机屏幕宽度下内容超出两行则显示阅读全文,否则不显示阅读全文

大家讲道理大家讲道理2738 Il y a quelques jours1699

répondre à tous(6)je répondrai

  • 我想大声告诉你

    我想大声告诉你2017-05-16 13:10:51

    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

    répondre
    0
  • 给我你的怀抱

    给我你的怀抱2017-05-16 13:10:51

    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~

    répondre
    0
  • 阿神

    阿神2017-05-16 13:10:51

    Ensuite, jugez la hauteur du rang

    répondre
    0
  • 巴扎黑

    巴扎黑2017-05-16 13:10:51

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

    répondre
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-16 13:10:51

    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

    répondre
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-05-16 13:10:51

    utiliser

    elem.getClientRects()
    

    C'est ça

    répondre
    0
  • Annulerrépondre