Penjelasan terperinci tentang sifat susun atur teks CSS: limpahan teks dan ruang putih

Penjelasan terperinci sifat reka letak teks CSS: limpahan teks dan ruang putih

Dalam reka bentuk web, reka letak teks ialah pautan yang sangat penting boleh menjadikan teks lebih mudah dibaca dan cantik. CSS menyediakan beberapa sifat untuk mengawal cara teks dipaparkan, termasuk limpahan teks dan ruang putih. Artikel ini akan memperincikan penggunaan dan kod sampel kedua-dua sifat ini.

1. Atribut limpahan teks

Atribut limpahan teks digunakan untuk mengawal cara teks dipaparkan apabila ia melebihi bekas. Nilai biasa termasuk yang berikut:

1. klip: Nilai lalai, bahagian di luar bekas akan dipotong.
2. ellipsis: Bahagian di luar bekas akan dipaparkan dengan elips (...).
3. rentetan: Rentetan yang dipaparkan boleh disesuaikan.

Berikut ialah contoh kod:

<style>
  .container {
    width: 200px;
    white-space: nowrap; /* 强制不换行 */
    overflow: hidden; /* 超出容器部分隐藏 */
    text-overflow: ellipsis; /* 超出部分以省略号显示 */
  }
</style>

<div class="container">
  This is a long text that should be truncated with an ellipsis when it overflows.
</div>

Dalam kod di atas, kami menggunakan bekas dan menetapkan lebar kepada 200px dan kandungan teks kepada ayat yang panjang. Dengan menetapkan atribut ruang putih kepada nowrap, ini bermakna tiada pembalut baris dipaksa dan atribut limpahan tersembunyi, yang bermaksud bahagian di luar bekas itu tersembunyi. Perkara yang paling penting ialah sifat limpahan teks, yang kami tetapkan kepada elipsis, yang bermaksud bahawa lebihan dipaparkan dengan elipsis.

2. Atribut ruang putih

Atribut ruang putih digunakan untuk mengawal cara aksara ruang putih diproses dalam teks. Nilai biasa adalah seperti berikut:

1. normal: Nilai lalai, mengendalikan aksara ruang putih secara automatik, menggabungkan aksara ruang putih berturut-turut ke dalam satu ruang dan baris baharu serta tab juga dianggap sebagai ruang.
2. nowrap: Jangan paksa pemutusan baris, gabungkan aksara ruang kosong berturut-turut ke dalam satu ruang.
3. pra: Kekalkan ruang putih asal dan kekalkan format ruang putih teks.
4. pra-bungkus: Simpan aksara ruang kosong asal, benarkan pemisah baris dan teks akan dipaparkan dalam format asal.
5. pra-baris: Mengendalikan aksara ruang putih secara automatik, tetapi mengekalkan pemisah baris, benarkan pemisah baris dan teks akan dipaparkan dalam format asal.

Berikut ialah contoh kod:

<style>
  .container {
    white-space: pre-wrap; /* 保留原始的空白符，允许换行 */
  }
</style>

<div class="container">
  This is a long text that should wrap when it reaches the container's width.
</div>

Dalam kod di atas, kami menggunakan bekas dan menetapkan sifat ruang putih untuk pra-bungkus supaya teks akan mengekalkan ruang putih asal dan membenarkan baris baharu.

Dengan menggunakan sifat limpahan teks dan ruang putih, kami boleh mengawal reka letak teks dengan lebih fleksibel untuk menjadikannya lebih cantik dan boleh dibaca. Dalam reka bentuk web sebenar, kita boleh memilih nilai yang sesuai mengikut keperluan dan nyahpepijat berdasarkan kod sampel.

Ringkasan:

text-overflow dan white-space ialah sifat dalam CSS yang digunakan untuk mengawal reka letak teks. limpahan teks digunakan untuk mengawal kaedah paparan apabila teks melebihi nilai biasa adalah klip, elipsis dan rentetan ruang putih digunakan untuk mengawal cara aksara ruang putih diproses dalam teks adalah normal, nowrap, pre, pre-wrap dan pre-line. Dengan menggunakan kedua-dua atribut ini dengan betul, kami boleh mencapai kesan reka letak teks yang lebih baik.

Atas ialah kandungan terperinci Penjelasan terperinci tentang sifat susun atur teks CSS: limpahan teks dan ruang putih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!