Bagaimana untuk menghalang sel dalam jadual css daripada dibungkus

Bagaimana untuk menyedari bahawa sel jadual css tidak membungkus: 1. Buka fail HTML yang sepadan 2. Lihat kandungan jadual dan tag td 3. Tetapkan atribut css kepada "putih"; untuk jadual dan teg td -space:nowrap;" akan menghalang teks dalam jadual daripada dibalut.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, versi CSS3, komputer DELL G3

Cara menghalang sel dalam css meja dari bungkus ?

Tetapan pembalut bukan baris teks jadual CSS:

Banyak kali semasa pembangunan projek, kami akan menghadapi masalah pembalut baris yang disebabkan oleh kandungan sel yang terlalu banyak membuat meja kelihatan sangat hodoh. Mari kita lihat cara menggunakan css untuk menetapkan teks dalam jadual supaya tidak membungkus.

Css boleh menetapkan gaya ruang putih:nowrap untuk jadual dan teg td supaya teks dalam jadual tidak dibalut.

Kod adalah seperti berikut:

/*让单元格内容过多时也不换行*/
#datasTablediv table td{
white-space: nowrap;
}

Atribut ruang putih menetapkan cara mengendalikan ruang putih dalam elemen.

Atribut ini mengisytiharkan cara mengendalikan aksara ruang putih dalam elemen semasa proses reka letak. Nilai pra-bungkus dan pra-baris adalah baharu dalam CSS 2.1.

Nilai atribut:

Lalai biasa. Ruang putih diabaikan oleh penyemak imbas.

kosong pra akan disimpan oleh penyemak imbas. Ia berkelakuan seperti teg 8ab1222b1e140d8f9d06365d507f2bfc

nowrap Teks tidak akan dibalut, teks akan diteruskan pada baris yang sama sehingga teg 0c6dc11e160d3b678d68754cc175188a

pra-bungkus Kekalkan jujukan ruang putih, tetapi balut garisan seperti biasa.

pra-baris menggabungkan jujukan ruang putih tetapi mengekalkan baris baharu.

warisan menyatakan bahawa nilai atribut ruang putih harus diwarisi daripada elemen induk.

Contoh:

kod css:

table {
    border : 1px solid red;
}
td {
    white-space:nowrap;
    text-overflow:ellipsis;
    width:50px;
    overflow:hidden;    
    display: block;
}

kod html:

<table>
    <tr><td>此处文本超过设定的宽度</td></tr>
</table>

Pembelajaran yang disyorkan: "tutorial video css》

Atas ialah kandungan terperinci Bagaimana untuk menghalang sel dalam jadual css daripada dibungkus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!