Stellen Sie die Breite der Tabelle so ein, dass sie sich nicht mit dem Text ändert

Nachdem die Tabellenbreite auf der Seite auf width="600px" eingestellt wurde, ist die Breite immer noch nicht festgelegt. Der Text wird nicht umbrochen, wenn er zu lang ist, was die Tabelle verformt.

Lösung:

1. Die Breite der Tabellensätze ist sowohl absolut als auch relativ akzeptabel.

Tabellenlayout: fest;
Wenn diese Eigenschaft festgelegt ist, haben alle verbleibenden TDs die gleiche Breite.

Nach dieser Operation ist die Breite der Tabelle festgelegt. Wenn der Artikel jedoch sehr lang ist, bedeckt der Text die

Lösung:

Fügen Sie style="word-wrap:break-word;" zum td hinzu, um den Text umzubrechen. Wenn Sie den Text nicht umbrechen möchten, können Sie den Inhalt, der das Limit überschreitet, ausblenden und durch Auslassungspunkte ersetzen:

Oben td hinzufügen

Code kopieren

Der Code lautet wie folgt:

Überlauf: versteckt;
Leerzeichen:nowrap;

text-overflow:ellipsis; (derzeit nur in IE8 getestet)
Empfohlene Methode (14.11.2013 von Zhang Lei) Verwenden Sie div, um den Inhalt von td zu steuern

TD hinzufügen

(1) Text wird automatisch ausgeblendet, wenn er die Breite und Höhe überschreitet

Code kopieren

Der Code lautet wie folgt:

<div style="width:100px;height:25px;overflow-x:hidden;overflow-y:hidden;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

(2) Stellen Sie die TD-Breite so ein, dass sie automatisch umgebrochen wird, wenn sie die Länge überschreitet

Code kopieren

Der Code lautet wie folgt:

<td><div style="width:100px;word-wrap:break-word;" >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</td>

<<: Entdecken Sie, wie Ihnen eine LED den Einstieg in den Linux-Kernel erleichtert

>>: Einführung in das Fokuselement document.activeELEment in JavaScript

TD-Breitenproblem beim Zusammenführen von TD-Zellen

Stellen Sie die Breite der Tabelle so ein, dass sie sich nicht mit dem Text ändert

TD-Breitenproblem beim Zusammenführen von TD-Zellen

HTML-Code zum Hinzufügen von Symbolen zum transparenten Eingabefeld

Native JS-Canvas zum Erzielen einer einfachen Schlange

jQuery verwendet das Canvas-Tag, um den Bestätigungscode zu zeichnen

CocosCreator-Tutorial für den Einstieg: Erstellen Sie Ihr erstes Spiel mit TS

Detaillierte Erläuterung der Implementierung einer regelmäßigen Sicherung von MySQL-Datenbanktabellen

Details zu Makrotasks und Mikrotasks in JavaScript

Beispiele für die Verwendung von pessimistischem und optimistischem Sperren in MySQL

Docker-Umgebung in Linux-Umgebung installieren (keine Fallstricke)

So implementieren Sie Polygonbrechung in Echtzeit mit Threejs

Artikel empfehlen

Thumbnail-Hover-Effekt mit CSS3 implementiert

Mysql kann keine nicht aggregierten Spalten auswählen

Erläuterung zum Erstellen der Graphdatenbank neo4j in einer Linux-Umgebung

So implementieren Sie die Vue-Bindungsklasse und den Inline-Bindungsstil

SQL-Implementierung von LeetCode (181. Angestellte verdienen mehr als Manager)

Lösen Sie das Problem beim Ausführen von Jupyter Notebook auf dem Server

Installationsschritte von MySQL unter Linux

So verstehen Sie die semantische HTML-Struktur

Detaillierte Erläuterung der perfekten CSS3+JS-Implementierung des Lupenmodus

Detaillierte Erläuterung des Ausführungsplans, Beispiel für einen Befehl in MySQL

So installieren Sie Docker und Portainer in Kali

Tutorial zur Installation, Bereitstellung und Verwaltung von KVM-Virtualisierung

Zusammenfassung der englischen Namen chinesischer Schriftarten

Detaillierte Erklärung, wie zwei Node.js-Prozesse kommunizieren

Grafisches Tutorial zur kostenlosen Installationsversion von MySQL 5.7.21 winx64