Heim > Artikel > Web-Frontend > Wie kann ich den Inhalt von Tabellenzellen in HTML umbrechen?

Wie kann ich den Inhalt von Tabellenzellen in HTML umbrechen?

DDDOriginal: 2024-10-27 08:57:03518Durchsuche

How to Make Table Cell Content Wrap in HTML?

So erzwingen Sie die Tabellenzelle Zu umschließender Inhalt

Im bereitgestellten Code wird der Text im Elemente werden beim Absenden gestreckt. Um dieses Problem zu beheben und sicherzustellen, dass der Text innerhalb der Zellen umbrochen wird, können die folgenden Schritte unternommen werden:

Lösung

Tabellenlayout:
Tabelle hinzufügen -Layout:fest an der Element. Dieses Attribut gibt an, dass die Tabelle ein festes Layout hat, wodurch ihre Spalten gezwungen werden, die angegebene Breite zu haben.
Zeilenumbruch:
Word-wrap:break-word zum < hinzufügen ;td> Elemente. Diese Eigenschaft ermöglicht den Zeilenumbruch innerhalb der Tabellenzellen, sodass langer Text in mehrere Zeilen aufgeteilt werden kann.

Beispiel

<html><br><head> <br> <style><br> Tabelle {border-collapse:collapse; Tabellenlayout:fest; width:310px;}<br> table td {border:solid 1px #fab; Breite: 100 Pixel; Word-Wrap: Break-Word; ></table><br></body><br></html></p>

DEMO:

  <tr>
     <td>1</td>
     <td>Lorem Ipsum</td>
     <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
  </tr>
  <tr>
     <td>2</td>
     <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
     <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
  </tr>
  <tr>
     <td>3</td>
     <td></td>
     <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
  </tr>

table {border-collapse:collapse; Tabellenlayout:fest; width:310px;}

       
“
Das obige ist der detaillierte Inhalt vonWie kann ich den Inhalt von Tabellenzellen in HTML umbrechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html break class Attribute Property JS this border table td issue word

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie kann ich Kreise mit CSS ohne JavaScript in gleiche oder unterschiedliche Größen segmentieren?Nächster Artikel：Wie kann ich Kreise mit CSS ohne JavaScript in gleiche oder unterschiedliche Größen segmentieren?

In Verbindung stehende Artikel

Mehr sehen