Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana Memaksa Balutan Teks Dalam Sel Jadual?

Bagaimana Memaksa Balutan Teks Dalam Sel Jadual?

DDD
DDDasal
2024-10-27 02:48:30349semak imbas

How to Force Text Wrap Within Table Cells?

Cara Menguatkuasakan Balutan Teks dalam Sel Jadual

Masalah

Dalam jadual data dengan teks panjang dalam sel tertentu, sel berkembang secara unilateral dan bukannya membungkus teks. Kelas CSS (boleh dibalut) telah dilaksanakan, tetapi isu itu berterusan. Jadual terkandung dalam div, menimbulkan persoalan sama ada div dan manipulasi lebar jadual diperlukan.

Penyelesaian

Untuk memaksa bungkus teks dalam sel jadual, gunakan sifat CSS berikut:

<code class="css">table {
  table-layout: fixed;
}

td {
  word-wrap: break-word;
}</code>

Penjelasan:

  • susun atur jadual: tetap memastikan bahawa lebar semua lajur tetap, menghalang sel daripada mengembang secara mendatar.
  • word-wrap: break-word menyebabkan teks terputus dan membalut ke baris seterusnya apabila perkataan terlalu panjang untuk dimuatkan dalam lebar lajur.

Contoh

Berikut ialah contoh untuk menggambarkan penyelesaian:

<code class="html"><style>
  table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 310px;
  }

  td {
    border: solid 1px #fab;
    width: 100px;
    word-wrap: break-word;
  }
</style>

<table border="1">
  <tr>
    <td>1</td>
    <td>Lorem Ipsum</td>
    <td>
      Lorem Ipsum is simply dummy text of the printing and typesetting
      industry.
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>
      LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown
    </td>
    <td>
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book.
    </td>
  </tr>
  <tr>
    <td>3</td>
    <td></td>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna...
    </td>
  </tr>
</table></code>

Kesimpulan

Dengan melaksanakan susun atur jadual: tetap dan balutan perkataan: kata putus, anda boleh dengan mudah menguatkuasakan bungkus teks dalam sel jadual, memastikan bahawa reka letak jadual kekal konsisten dan boleh dibaca tanpa mengira panjang teks.

Atas ialah kandungan terperinci Bagaimana Memaksa Balutan Teks Dalam Sel Jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn