Meneroka sifat pembalut teks CSS: balut perkataan dan sempang

Penerokaan sifat pembalut teks CSS: balutan perkataan dan sempang

Dalam reka bentuk web, pembalut teks merupakan isu penting. Apabila teks melebihi lebar bekas, kita perlu memilih kaedah pembalut baris yang sesuai untuk memastikan kebolehbacaan dan estetika kandungan. Artikel ini akan memperkenalkan dua sifat yang biasa digunakan dalam CSS: balutan perkataan dan sempang serta memberikan contoh kod khusus untuk menggambarkan penggunaan dan kesannya.

1. atribut word-wrap

Atribut word-wrap digunakan untuk menentukan cara teks dikendalikan semasa membalut. Ia mempunyai dua nilai pilihan: normal dan break-word.

• biasa: Nilai lalai. Apabila teks melebihi lebar bekas, baris dibalut antara perkataan dan jika perkataan terlalu panjang untuk dimuatkan sepenuhnya pada satu baris, ia melimpah ke baris seterusnya.

Kod contoh:

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.normal-text {
  word-wrap: normal;
}
</style>

<div class="container">
  <p class="normal-text">这是一段很长很长很长很长很长很长的文本。</p>
</div>

Kesan: Lebar bekas ialah 200px, dan apabila teks melebihi lebar bekas, pemisah baris akan dilakukan antara perkataan.

• kata putus: Apabila teks melebihi lebar bekas, ia akan pecah di dalam perkataan, walaupun aksara baris baharu di tengah perkataan tidak wujud.

Kod contoh:

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.break-word {
  word-wrap: break-word;
}
</style>

<div class="container">
  <p class="break-word">这是一段很长很长很长很长很长很长的文本。</p>
</div>

Kesan: Lebar bekas ialah 200px, dan apabila teks melebihi lebar bekas, ia akan membungkus di dalam perkataan.

2. atribut sempang

atribut sempang digunakan untuk mengawal penggunaan sempang untuk menyesuaikan diri dengan bahasa yang berbeza dan keperluan susun atur teks. Ia mempunyai tiga nilai pilihan: tiada, manual dan auto.

• tiada: Nilai lalai. Tanpa tanda sempang, teks dibalut terus apabila diperlukan.

Kod contoh:

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.no-hyphens {
  hyphens: none;
}
</style>

<div class="container">
  <p class="no-hyphens">这是一个没有连字符的例子。这个长长长长的单词不会被自动断行，而是直接溢出到下一行。Hyphens are not used in this example, so the long word will overflow to the next line instead of being automatically broken.</p>
</div>

Kesan: Lebar bekas ialah 200px, dan apabila teks melebihi lebar bekas, perkataan melimpah terus ke baris seterusnya.

• manual: Sempang manual, tambah sempang secara manual mengikut peraturan sempang bahasa.

Kod contoh:

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.manual-hyphens {
  hyphens: manual;
}
</style>

<div class="container">
  <p class="manual-hyphens">这是一个使用手动断字的例子。这个长长长长的单词被手动添加了连字符，使其在需要换行时正确断行显示。</p>
</div>

Kesan: Lebar bekas ialah 200px, dan apabila teks melebihi lebar bekas, perkataan akan dipecahkan dengan betul dan dipaparkan mengikut peraturan sempang bahasa.

• auto: Tambah sempang secara automatik mengikut peraturan sempang bahasa.

Kod contoh:

<style>
.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.auto-hyphens {
  hyphens: auto;
}
</style>

<div class="container">
  <p class="auto-hyphens">这是一个使用自动断字的例子。这个长长长长的单词会根据语言的断字规则自动添加连字符，使其在需要换行时正确断行显示。</p>
</div>

Kesan: Lebar bekas ialah 200px, dan apabila teks melebihi lebar bekas, perkataan akan dipecahkan dengan betul dan dipaparkan mengikut peraturan sempang bahasa.

Ringkasan:

Dengan menggunakan dua sifat CSS word-wrap dan sempang, kita boleh mempunyai kawalan yang lebih terperinci ke atas pembalut teks. Atribut word-wrap digunakan untuk menentukan cara untuk membalut baris, dan anda boleh memilih untuk membalut baris antara perkataan atau dalam perkataan atribut sempang digunakan untuk mengawal penggunaan sempang, dan anda boleh memilih untuk tidak menggunakan sempang, tambah sempang secara manual, atau tambah sempang secara automatik. Dalam reka bentuk web sebenar, kita boleh memilih nilai atribut yang sesuai mengikut ciri dan keperluan bahasa teks untuk mencapai kesan kebolehbacaan dan penataan huruf yang lebih baik.

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