Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Menghalang Limpahan Teks daripada Mengembangkan Lebar Lajur Jadual HTML?

Bagaimanakah Saya Boleh Menghalang Limpahan Teks daripada Mengembangkan Lebar Lajur Jadual HTML?

Patricia Arquette
Lepaskan: 2024-12-17 03:37:25
asal
863 orang telah melayarinya

How Can I Prevent Text Overflow from Expanding HTML Table Column Widths?

Kawal Lebar Lajur Jadual Walaupun Teks Limpahan

Banyak pembangun menghadapi isu lebar lajur berkembang dalam jadual HTML apabila menangani sel teks yang melimpah. Untuk menangani isu ini, adalah penting untuk mengekalkan lebar lajur yang konsisten tanpa mengira panjang kandungan sel.

Untuk mengatasi cabaran ini, pendekatan berikut disyorkan:

  1. Nyatakan Lajur Lebar: Gunakan CSS untuk menentukan lebar yang diingini untuk setiap sel lajur menggunakan "lebar" property.
  2. Betulkan Reka Letak Jadual: Tetapkan sifat "table-layout" kepada "fixed" untuk jadual. Ini menghalang sel individu daripada mengatasi lebar yang ditentukan.
  3. Lumpuhkan Pengembangan Sel: Tetapkan sifat "limpahan" kepada "tersembunyi" untuk kedua-dua pengepala ("th") dan data ("td" ) sel. Ini memastikan bahawa sebarang teks berlebihan kekal dalam sel dan bukannya menolak lebar lajur.

Berikut ialah contoh kod CSS yang menggabungkan pengesyoran ini:

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}
Salin selepas log masuk

Dengan tetapan ini , lebar lajur kekal tetap pada 100px, walaupun sel teks mengandungi kandungan yang berlebihan. Anda boleh mempertingkatkan lagi penampilan dengan melaraskan jidar dan saiz melalui CSS.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghalang Limpahan Teks daripada Mengembangkan Lebar Lajur Jadual HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan