ブートストラップテーブルが長い未スペーステキストでオーバーフローする

Question

私はブートストラップを使用していますが、いくつかの列を持つテーブルがあります。最後にはスペースがない長いテキストがあることがあります。私は特定の画面サイズの下で、テーブルが親divをオーバーフローし、その兄弟テーブルと醜いオーバーラップを作成することに気づいた。

私はそれと一緒に遊んでいました。問題は、テキストがスペースを置かれていることと関係していると思います。私が意味することを示すjsfiddleを作成しました。

ご覧のとおり、一番左上のテーブルは正常に動作しており、さらに多くのテキストを格納できるように縦方向に成長しています。ただし、左下の表は、テキストの長さが長いため右にオーバーフローし、左下の表の右の列が兄弟の「下」になります。

非常に長いテキストが切り詰められるか、部分的に新しい行に分割されるように、どのように修正すればよいのですか？

Answer 1

は、あなたが望むように、あなたが経由して、CSSレイアウトを調整することができ、あなたの<table>

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

に次のスタイルを追加します。

Answer 2

これは、あなたがCSSの下に使用することができます

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

Answer 3

をtdのか、いずれかのためにそれを追加するだけで を固定するために、テーブルのレイアウトを強制することなく動作します。これは、テキストをラップし、テキストの最後に適用します。

This_is_a_large_textあなたはまた、完全なテキスト値を表示するツールチップを追加することができます

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

... This_is_a_larに変更されます。

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

Answer 4

Internet Explorerでこれらのソリューションを使用する際に問題が発生しました。

最終的には次のスタイルを使用しました。

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