Wie erzwinge ich einen Textumbruch innerhalb von Tabellenzellen?

So erzwingen Sie den Textumbruch innerhalb von Tabellenzellen

Problem

In einer Datentabelle mit langem Text in bestimmten Zellen werden die Zellen eher einseitig erweitert den Text umschließen. Eine CSS-Klasse (wrappable) wurde implementiert, aber das Problem besteht weiterhin. Die Tabelle ist in einem Div enthalten, was die Frage aufwirft, ob eine Manipulation der Div- und Tabellenbreite erforderlich ist.

Lösung

Um den Textumbruch innerhalb von Tabellenzellen zu erzwingen, verwenden Sie die folgenden CSS-Eigenschaften:

<code class="css">table {
  table-layout: fixed;
}

td {
  word-wrap: break-word;
}</code>

Erklärung:

• Tabellenlayout: Fest stellt sicher, dass die Breite aller Spalten festgelegt ist und verhindert, dass Zellen horizontal erweitert werden.
• word-wrap: break-word bewirkt, dass Text umgebrochen und in die nächste Zeile umgebrochen wird, wenn ein Wort zu lang ist, um in die Spaltenbreite zu passen.

Beispiel

Hier ist ein Beispiel Um die Lösung zu veranschaulichen:

<code class="html"><style>
  table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 310px;
  }

  td {
    border: solid 1px #fab;
    width: 100px;
    word-wrap: break-word;
  }
</style>

<table border="1">
  <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></code>

Fazit

Durch die Implementierung von table-layout: Fixed und word-wrap: break-word können Sie den Textumbruch innerhalb von Tabellenzellen einfach erzwingen und so sicherstellen, dass die Das Tabellenlayout bleibt unabhängig von der Textlänge konsistent und lesbar.

Das obige ist der detaillierte Inhalt vonWie erzwinge ich einen Textumbruch innerhalb von Tabellenzellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!