So verhindern Sie, dass Zellen in einer CSS-Tabelle umbrochen werden

So stellen Sie fest, dass die Zellen der CSS-Tabelle nicht umbrochen werden: 1. Öffnen Sie die entsprechende HTML-Datei. 2. Sehen Sie sich den Inhalt der Tabelle und der TD-Tags an. 3. Setzen Sie das CSS-Attribut für die Tabellen- und TD-Tags. „white-space:nowrap ;“ verhindert, dass der Text in der Tabelle umbrochen wird.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3-Version, DELL G3-Computer

Wie stelle ich sicher, dass die Zellen der CSS-Tabelle nicht umbrochen werden?

CSS-Tabellentext-Einstellung ohne Zeilenumbruch:

Während der Projektentwicklung stoßen wir häufig auf Zeilenumbruchprobleme, die durch zu viel Zellinhalt verursacht werden, wodurch die Tabelle sehr hässlich aussieht. Schauen wir uns an, wie Sie mit CSS festlegen, dass der Text in der Tabelle nicht umbrochen wird.

CSS kann verhindern, dass der Text in der Tabelle umbrochen wird, indem der Stil „white-space:nowrap;“ für die Tags „table“ und „td“ festgelegt wird.

Der Code lautet wie folgt:

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

Das White-Space-Attribut legt fest, wie mit Leerraum innerhalb des Elements umgegangen wird.

Dieses Attribut legt fest, wie mit Leerzeichen in Elementen während des Layoutprozesses umgegangen wird. Die Werte pre-wrap und pre-line sind neu in CSS 2.1.

Attributwert:

normaler Standard. Leerzeichen werden vom Browser ignoriert.

Vor-Leerzeichen werden vom Browser beibehalten. Es verhält sich wie das

-Tag in HTML. </p><p>nowrap Der Text wird nicht umgebrochen, der Text wird in derselben Zeile fortgesetzt, bis das <br>-Tag gefunden wird. </p><p>pre-wrap Behält Leerzeichensequenzen bei, wird aber normal umbrochen. </p><p>pre-line führt Leerzeichensequenzen zusammen, behält aber Zeilenumbrüche bei. </p><p>inherit gibt an, dass der Wert des Leerraumattributs vom übergeordneten Element geerbt werden soll. </p><p>Beispiel: </p><p>CSS-Code: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">table {
    border : 1px solid red;
}
td {
    white-space:nowrap;
    text-overflow:ellipsis;
    width:50px;
    overflow:hidden;    
    display: block;
}