Meneroka sifat keratan teks CSS: limpahan teks dan limpahan

Penerokaan sifat keratan teks CSS: limpahan teks dan limpahan

Pengenalan:
Dalam pembangunan web, kita sering menghadapi situasi di mana teks perlu dipotong. CSS menyediakan berbilang cara untuk klip teks, termasuk sifat limpahan teks dan limpahan. Artikel ini meneroka kedua-dua sifat dan menyediakan contoh kod konkrit.

1. Atribut text-overflow

1. text-overflow: clip
   Apabila teks melimpahi sempadan bekas, ia akan dipangkas secara automatik dan tidak akan dipaparkan di luar bekas.

Contoh:

<style>
.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
</style>


<div class="container">
  这是一个超长的文本内容，当超出容器宽度时会被裁剪掉。
</div>

2. text-overflow: elipsis
   Apabila teks melimpahi sempadan bekas, elips akan digunakan untuk menunjukkan bahagian yang dipangkas.

Contoh:

<style>
.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>


<div class="container">
  这是一个超长的文本内容，当超出容器宽度时会被用省略号表示。
</div>

2. Atribut limpahan

1. limpahan: tersembunyi
   Apabila kandungan melimpahi sempadan kontena, ia akan dipangkas dan tidak akan dipaparkan di luar bekas.

Contoh:

<style>
.container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}
</style>


<div class="container">
  <p>这是一个超长的文本内容，当超出容器宽度时会被裁剪掉。</p>
</div>

2. limpahan: tatal
   Apabila kandungan melimpahi sempadan bekas, bar skrol akan ditambah untuk memaparkan bahagian yang dipangkas, dan pengguna boleh menggunakan bar skrol untuk melihat keseluruhan kandungan. . Atribut limpahan boleh mengawal kelakuan limpahan bekas, tersembunyi boleh memotong bahagian limpahan dan tatal menambah bar tatal untuk memaparkan kandungan. Dalam projek sebenar, anda boleh memilih atribut yang sesuai mengikut keperluan anda untuk mencapai kesan pemangkasan teks.

Atas ialah kandungan terperinci Meneroka sifat keratan teks CSS: limpahan teks dan limpahan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!