javascript - Bagaimanakah bahagian hadapan web menentukan sama ada sekeping kandungan adalah dua baris panjang? (Apabila lebar skrin berbeza)

Question

Adakah terdapat sebarang cara untuk mengira bilangan baris yang digunakan oleh sekeping teks pada saiz skrin yang berbeza?
< /p>

Seperti yang ditunjukkan dalam rajah, jika kandungan melebihi dua baris di bawah lebar skrin telefon bimbit pengguna, teks penuh akan dipaparkan, jika tidak, teks penuh tidak akan dipaparkan

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