css berbilang baris di luar elips

Dalam reka bentuk web, selalunya perlu untuk memaparkan teks berbilang baris Walau bagaimanapun, apabila kandungan teks terlalu panjang, ia akan melebihi had lebar pratetap, mengakibatkan reka letak yang mengelirukan. Untuk mengelakkan situasi ini, kita perlu meninggalkan teks berlebihan dan memaparkan elips untuk meningkatkan keseluruhan estetika dan pengalaman pengguna. Sebenarnya, sangat mudah untuk menggunakan gaya CSS untuk mencapai kesan ini Seterusnya, kami akan memperkenalkan beberapa kaedah yang biasa digunakan.

Kaedah 1: Elipsis berpusat baris tunggal

Kaedah ini adalah yang paling mudah dan sesuai untuk kandungan teks dengan hanya satu baris. Kita boleh mencapai ini melalui dua baris kod CSS berikut:

overflow: hidden;
text-overflow: ellipsis; 

overflow adalah untuk menyembunyikan teks yang melebihi had lebar, text-overflow ialah cara untuk menyatakannya selepas ia melebihi had lebar, dan elipsis digunakan di sini. Walau bagaimanapun, terdapat pengehadan dengan dua baris kod ini, yang hanya terpakai pada peninggalan satu baris. Jika teks mempunyai berbilang baris, kita perlu menggunakan kaedah lain.

Kaedah 2: Jajarkan elips pada kedua-dua hujung berbilang baris

Kaedah ini membenarkan berbilang baris teks dan elipsis muncul pada penghujung perkataan terakhir setiap baris teks. Kuncinya di sini ialah menggunakan display: -webkit-box; untuk menukar bekas teks ke dalam kotak fleksibel:

.box {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; // 限制显示的行数
}

Antaranya, -webkit-line-clamp bermaksud mengehadkan bilangan maksimum baris paparan teks. Jika anda ingin memaparkan lebih banyak baris, hanya tukar nombor kepada nombor yang lebih besar.

Kelemahan kaedah ini ialah ia hanya boleh digunakan oleh penyemak imbas yang menyokong kernel Webkit, jadi perhatian khusus perlu diberikan kepada keserasian.

Kaedah 3: Elipsis berbilang baris + tuding tetikus untuk memaparkan teks penuh

Kaedah ini serupa dengan butang "Baca teks penuh" Teks penuh hanya akan dipaparkan apabila pengguna tuding penunjuk tetikus di atas teks . Pertama, kita perlu mengehadkan teks kepada julat ketinggian bekas, dan teks yang berlebihan disembunyikan. Kemudian, kita boleh mengawal paparan dan penyembunyian teks melalui acara masuk tetikus dan meninggalkan tetikus JavaScript.

Untuk bahagian CSS, kami boleh melaksanakannya melalui kod berikut:

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3; //限定显示行数
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.show-text {
  display: block;
  cursor: pointer;
}

Gunakan js untuk melaksanakan pengikatan acara dan paparan teks serta penyembunyian:

var text = document.querySelector('.text');
var textHeight = window.getComputedStyle(text).height;

if(parseInt(textHeight) < text.scrollHeight) {
  text.classList.add('show-text');
  text.addEventListener('mouseenter', function() {
    text.classList.remove('text');
  });
  text.addEventListener('mouseleave', function() {
    text.classList.add('text');
  });
}

Kaedah ini boleh Lebih Baik kawalan ke atas paparan dan penyembunyian teks meningkatkan pengalaman pengguna, tetapi ia memerlukan lebih banyak masa pengekodan dan kesan dinamik untuk dilaksanakan.

Kaedah 4: Gunakan penapis dalam Vue.js

Vue.js ialah rangka kerja bahagian hadapan yang boleh mencapai pengikatan dua hala data dan tindak balas dinamik halaman. Dalam Vue.js, kita boleh mencapai kesan elips berbilang baris melalui penapis. Seperti yang ditunjukkan dalam kod berikut:

<p v-html="text | multilineEllipsis(3)"></p>

Antaranya, arahan v-html digunakan untuk memaparkan kandungan teks, dan simbol saluran paip "|" digunakan untuk menyelaraskan penapis dan ungkapan. Penapis boleh ditakrifkan dalam keadaan Vue.js, seperti yang ditunjukkan di bawah:

Vue.filter('multilineEllipsis', function(text, lines) {
  var stopwords = ['the', 'in', 'on', 'at', 'is', 'are', 'to', 'and'];
  var reg = new RegExp(`(?:(?<=(^|(.{2,}?\W)))[${stopwords.join('')}])?(?<line>(.|\n){1,20}(?=(.|\n){0,20}[\W]$))`, 'g');
  var len = 0;
  var result = '';
  var lineCount = 0;

  while(len <= text.length && lineCount < lines) {
    var match = reg.exec(text.slice(len));
    if(match && match.groups.line) {
      result += match.groups.line;
      len += match[0].length;
    } else {
      break;
    }

    if(len < text.length) {
      var nextchar = text[len];
      if(nextchar !== ' ' && nextchar !== '
' && nextchar !== '') {
        result += '...';
        break;
      }
    }
    lineCount++;
  }

  if(len < text.length) {
    result += '...';
  }

  return result;
});

Penapis ini akan melakukan pemadanan biasa dalam teks dan menukar setiap baris teks yang memenuhi keperluan kepada HTML yang sepadan. dan simpan elips. Penapis ini juga membolehkan anda merumuskan ungkapan biasa dengan merujuk kepada senarai perkataan Inggeris biasa, meningkatkan kualiti paparan teks.

Tamat

Di atas ialah beberapa cara untuk melaksanakan elips berbilang baris CSS Pembangun boleh memilih kaedah yang sesuai mengikut keperluan tertentu. Antaranya, pelaksanaan menggunakan penapis Vue.js agak baharu dan popular, serta diterima pakai oleh semakin ramai pembangun. Tidak kira kaedah yang digunakan, perhatian mesti diberikan kepada keserasian dan responsif dinamik, dan untuk meningkatkan estetika keseluruhan tapak web sambil memberikan pengguna pengalaman terbaik.

Atas ialah kandungan terperinci css berbilang baris di luar elips. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!