webentwicklung-frage-antwort-db.com.de

Bootstrap-Tabellen, die mit langem Text ohne Abstände überlaufen

Ich benutze Bootstrap und habe eine Tabelle mit ein paar Spalten, von denen die letzte manchmal einen langen Text ohne Leerzeichen hat. Ich habe festgestellt, dass die Tabelle bei bestimmten Bildschirmgrößen das übergeordnete div überlaufen würde und hässliche Überlappungen mit ihrer Geschwistertabelle verursachen würden. 

Ich habe damit herumgespielt und ich denke, das Problem hat damit zu tun, dass der Text nicht verschoben wird. Ich habe eine jsfiddle erstellt, die zeigt, was ich meine.

Wie Sie sehen, verhält sich die obere linke Tabelle gut und wächst einfach vertikal, um mehr Text aufzunehmen. Die Tabelle unten links führt jedoch aufgrund des langen unbeschriebenen Textes zu einem Überlauf auf der rechten Seite. Die rechte Spalte der Tabelle unten links wird "unter" ihrem "Bruder" aufgerollt. 

Hat jemand irgendwelche Tipps, wie ich das beheben kann, damit der sehr lange Text abgeschnitten oder teilweise in eine neue Zeile aufgeteilt wird?

62
Richard Bender

Fügen Sie Ihrem <table> die folgenden Stile hinzu

.the-table {
    table-layout: fixed;
    Word-wrap: break-Word;
}

Dann können Sie Ihr Layout über CSS individuell anpassen.

117
albertedevigo

Dies funktioniert, ohne zu erzwingen, dass das Tabellenlayout korrigiert wird 

.is-breakable {
  Word-break: break-Word;
}
22
Kate Kasinskaya

Ich hatte Probleme mit diesen Lösungen in Internet Explorer.

Ich habe den folgenden Stil verwendet, damit er endlich funktioniert.

<td style="Word-break: break-all">
2
Justin Ipson

Sie können unten css verwenden. Dadurch wird der Text umgebrochen und am Ende des Textes angewendet. 

z.B. This_is_a_large_text wird in This_is_a_lar geändert ...

td {
  max-width: 120px;
  overflow: hidden;
  text-overflow: Ellipsis;
  white-space: nowrap;
}

Sie können auch einen QuickInfo hinzufügen, um den vollständigen Textwert anzuzeigen.

<td data-toggle="tooltip" title="${text}">${text}</td>
0
Rahul Godara

Albers Antwort hat den Trick für mich gemacht

.the-table {
 table-layout: fixed;
 Word-wrap: break-Word;
}

In der JS wird es dynamisch geladen

 $("#"  + tableName ).addClass('the-table'); 

Ich hoffe es hilft!!

0