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

Question

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

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

Answer 1

Gunakan susun atur fleksibel di lapisan luar, tetapkan bilangan baris ketinggian atau berikan ketinggian maksimum maksimum pada lapisan luar
Letak teks dalam p di lapisan dalam, dan paparkannya seperti biasa

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

struktur html:

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

Kemudian nilaikan ketinggian keduanya:

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

Kali ini "Lihat lagi" dipaparkan

Answer 2

Ideanya adalah untuk menilai berdasarkan ketinggian baris Apabila ketinggian baris melebihi 1 baris, ini bermakna terdapat dua baris kandungan. Ini kodnya:

html adalah seperti berikut:

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

js adalah seperti berikut:

    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';
    }

Bukan mudah untuk membuat kod, sila like jika anda suka~

Answer 3

Kemudian nilaikan ketinggian baris

Answer 4

Teks semasa harus mempunyai dom yang berasingan, dapatkan ketinggian dan ketinggian garisnya dan hitungkannya secara dinamik

Answer 5

Untuk memberikan idea, anda boleh menetapkan ketinggian garis kepada 20px, dan kemudian selepas halaman dipaparkan, gunakan atribut offsetHeight nod dalam js, offsetHeight / 20ialah bilangan baris

Answer 6

gunakan

elem.getClientRects()

Itu sahaja