Bootstrap-Tabellen überlaufen mit langem, nicht passendem Text

Ich benutze Bootstrap und ich habe eine Tabelle mit ein paar Spalten, von denen die letzte manchmal ein langes Stück Text ohne Leerzeichen hat. Mir ist aufgefallen, dass die Tabelle bei bestimmten Bildschirmgrößen ihren übergeordneten div überlaufen und hässliche Überlappungen mit ihrer gleichgeordneten Tabelle erzeugen würde.Bootstrap-Tabellen überlaufen mit langem, nicht passendem Text

Ich spielte damit herum und ich denke, das Problem hat damit zu tun, dass der Text nicht passiv ist. Ich habe eine jsfiddle erstellt, die zeigt, was ich meine.

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

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

Quelle

2012-08-30 Richard Bender

109

Fügen Sie die folgenden Arten zu Ihrem <table>

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

Dann können Sie Ihr Layout über-CSS anpassen, wie Sie möchten.

Quelle

2012-09-04 12:59:02 albertedevigo

FYI, lesen irgendwo auf word-wrap depreceated werden, verwenden Sie Überfluss: break-word – unidha

@unidha Ich glaube, Sie sind falsch. Sie können den [Arbeitsentwurf] (http://www.w3.org/TR/css3-text/) oder den [Editor-Entwurf] (http://dev.w3.org/csswg/css-text-3) einsehen /). Diese "Überlauf" -Eigenschaft existiert nicht. Die Eigenschaft, über die wir sprechen, heißt "overflow-wrap" oder "word-wrap" als Alternative. Könnten Sie Ihre Quelle angeben? – albertedevigo

Ich lese hier http://www.impressivewebs.com/new-css3-text-wrap/ – unidha

Dies funktioniert ohne Tabellenlayout zwingt zu fixiert werden Sie es einfach in den td oder jede

.is-breakable { 
    word-break: break-word; 
}

Quelle

2016-05-25 08:37:58

schön, so einfach. –

können Sie unter CSS verwenden. Dies wird den Text umbrechen und ... am Ende des Textes anwenden.

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

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

Sie auch Werkzeugspitze hinzufügen können den vollständigen Text Wert anzuzeigen.

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

Quelle

2017-06-08 08:29:51

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

Ich habe den folgenden Stil verwendet, um es endlich zu arbeiten.

<td style="word-break: break-all">

Quelle

2017-10-01 10:38:33

Bootstrap-Tabellen überlaufen mit langem, nicht passendem Text

Antwort

Verwandte Themen