So erreichen Sie CSS-TD-Text ohne Zeilenumbruch

So implementieren Sie CSS-TD-Text ohne Zeilenumbruch: Öffnen Sie zuerst den entsprechenden CSS-Code und legen Sie dann den Stil „white-space:nowrap;“ für die Tabellen- und TD-Tags fest, um zu verhindern, dass der Text in der Tabelle umbrochen wird.

Die Betriebsumgebung dieses Tutorials: Dell G3-Computer, Windows 7-System, HTML5- und CSS3-Version.

CSS-Tabellentext-Einstellung ohne Zeilenumbruch

Während der Projektentwicklung stoßen wir oft 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 den Stil „white-space:nowrap;“ für die Tabellen- und td-Tags festlegen, sodass der Text in der Tabelle nicht umbrochen 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 e03b848252eb9375d56be284e690e873-Tag in HTML.

nowrap Der Text wird nicht umgebrochen, der Text wird in derselben Zeile fortgesetzt, bis das 0c6dc11e160d3b678d68754cc175188a-Tag gefunden wird.

pre-wrap Behält Leerzeichensequenzen bei, wird aber normal umbrochen.

pre-line führt Leerzeichensequenzen zusammen, behält aber Zeilenumbrüche bei.

inherit gibt an, dass der Wert des Leerraumattributs vom übergeordneten Element geerbt werden soll.

Beispiel:

CSS-Code:

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

HTML-Code:

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

Empfohlen: „CSS-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonSo erreichen Sie CSS-TD-Text ohne Zeilenumbruch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!