Bagaimanakah Saya Boleh Membuat Had Aksara dalam CSS untuk Tapak Web Responsif?

Mencipta Had Aksara dalam CSS untuk Tapak Web Responsif

Apabila mereka bentuk tapak web responsif, kawalan ke atas panjang teks adalah penting. Seseorang mungkin menghadapi keperluan untuk mengehadkan panjang ayat kepada bilangan aksara tertentu, memastikan teks tidak melimpah pada skrin besar.

Untuk mencapai ini, kaedah "pemangkasan" boleh digunakan menggunakan lebar maksimum CSS dan sifat limpahan-elips. Teknik ini melibatkan penetapan lebar maksimum untuk teks dan menambah elipsis (...) untuk menunjukkan bahawa teks telah dipotong.

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75ch; /* Adjust to desired character limit */
}

Contohnya:

.wrapper {
  padding: 20px;
  background: #eaeaea;
  max-width: 400px;
  margin: 50px auto;
}

.demo-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.demo-2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;
}

<div class="wrapper">
  <p class="demo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

<div class="wrapper">
  <p class="demo-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

Teknik ini memastikan bahawa teks akan dibalut dalam had aksara yang ditentukan pada saiz skrin yang berbeza-beza tanpa mengganggu reka letak.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Had Aksara dalam CSS untuk Tapak Web Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!