Bagaimana untuk melimpah dan menyembunyikan teks css

Dengan peningkatan dan pembangunan tapak web, kami memerlukan lebih banyak paparan dan reka letak teks. Dalam proses ini, panjang kandungan teks menjadi semakin sukar dikawal, malah mungkin melebihi sempadan bekas, mengakibatkan reka letak halaman mengelirukan. Untuk menyelesaikan masalah ini, kita boleh menggunakan sifat tersembunyi limpahan teks dalam CSS untuk mengawal julat paparan teks. Artikel ini akan menyediakan pengenalan terperinci dan aplikasi sifat tersembunyi limpahan teks CSS.

1. Atribut tersembunyi limpahan teks CSS

Atribut tersembunyi limpahan teks CSS ialah atribut yang sangat berguna yang disediakan oleh CSS. Ia boleh membantu kami mengawal kandungan teks dalam bekas untuk melebihi skop bekas. Cara menangani bahagian yang berlebihan. Kita boleh menggunakan sifat limpahan teks dalam CSS untuk menyembunyikan limpahan teks.

Nilai atribut limpahan teks adalah seperti berikut:

1. klip: Apabila teks melebihi skop bekas, ia dipangkas dan tidak dipaparkan.
2. elipsis: Tambahkan elipsis (…) pada penghujung teks.
3. rentetan: Tentukan rentetan sebagai gaya paparan apabila teks melimpah Anda boleh menyesuaikan gaya elipsis.

2. Gunakan limpahan teks untuk menyembunyikan limpahan teks

Berikut ialah contoh menggunakan atribut limpahan teks untuk menyembunyikan limpahan teks.

Kod HTML:

<div class="container">
  <p>
    我们的使命是将人民群众的利益放在第一位，通过改革开放不断推进中国特色社会主义事业。
  </p>
</div>

Kod CSS:

.container {
  width: 300px;
  height: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Penghuraian:

1. Lebar bekas ialah 300 piksel dan ketinggian ialah 50 piksel. Jika kandungan teks melebihi had bekas, ia akan disembunyikan.
2. Atribut limpahan:hidden menyatakan bahawa bahagian limpahan dalam bekas akan dipotong dan tidak akan dipaparkan pada halaman. Atribut ini memastikan bar skrol tidak akan muncul di dalam teks.
3. Atribut white-space:nowrap menentukan bahawa teks tidak dibenarkan untuk dibalut. Ini sangat penting, jika teks membenarkan pembalut baris, maka tidak ada cara untuk mengawal julat paparan teks.
4. Atribut text-overflow:ellipsis menentukan bahawa elipsis (…) dipaparkan pada penghujung teks apabila ia melebihi skop bekas.

Hasil berjalan:

Seperti yang ditunjukkan dalam rajah, panjang teks melebihi skop bekas dan elipsis dipaparkan pada penghujungnya.

3. Gunakan limpahan teks untuk menyesuaikan gaya elipsis

Dalam penggunaan sebenar, kita mungkin perlu menyesuaikan gaya elipsis.

Kod HTML:

<div class="container">
  <p class="text">
  我们的使命是将人民群众的利益放在第一位，通过改革开放不断推进中国特色社会主义事业。
  </p>
</div>

Kod CSS:

.container {
  width: 300px;
  height: 50px;
  overflow: hidden;
}

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text::after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 2px;
  background-color: #fff;
  color: #999;
}

Penghuraian:

1. Dalam gaya kelas teks, putih- Gabungan atribut space:nowrap dan atribut text-overflow:ellipsis digunakan untuk menentukan cara teks dipaparkan. overflow:hidden digunakan untuk memastikan bahagian limpahan teks dipotong dan tidak akan dipaparkan pada halaman.
2. Elemen semu ::selepas gaya kelas teks menambah akhiran '...' pada penghujung teks dan menentukan kedudukan dan gaya akhiran ini.

Hasil berjalan:

Seperti yang ditunjukkan dalam gambar, gaya elipsis tersuai dipaparkan pada penghujung teks.

Ringkasan:

Melalui pengenalan dan contoh operasi artikel ini, kita boleh menggunakan atribut limpahan teks untuk menyembunyikan limpahan teks, memastikan julat paparan teks tidak melebihi sempadan daripada bekas, dan pada masa yang sama Sesuaikan gaya elips untuk menjadikan halaman kami lebih cantik dan piawai. Selagi kami menguasai atribut ini, kami boleh menjadikan tetapan taip kami lebih halus dan profesional.

Atas ialah kandungan terperinci Bagaimana untuk melimpah dan menyembunyikan teks css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!