web-dev-qa-db-ja.com

Bootstrap長いスペースのないテキストでオーバーフローするテーブル

私はBootstrap=を使用しており、いくつかの列を持つテーブルがあり、最後のフィールドにはスペースのない長いテキストがある場合があります。特定の画面サイズでは、テーブルがオーバーフローすることに気付きました親divを作成し、その兄弟テーブルとい重複を作成します。

私はそれをいじってみましたが、問題はスペースが空いていないテキストに関係していると思います。私が意味することを示す jsfiddle を作成しました。

ご覧のとおり、左上の表は適切に動作し、より多くのテキストを収容できるように単純に垂直に拡大します。ただし、左下のテーブルは、長いスペースのないテキストが原因で右側にオーバーフローが発生し、左下のテーブルの右の列が兄弟の「下」になります。

非常に長いテキストが切り取られたり、新しい行に部分的に分割されるように、これを修正する方法に関するヒントはありますか？

csstwitter-bootstrapcss-tables
65
Richard Bender
.the-table {
    table-layout: fixed;
    Word-wrap: break-Word;
}

非推奨（つまり、ワードラップ）

次のスタイルを<table>に追加します

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

その後、必要に応じて、CSSを介してレイアウトを調整できます。

120
albertedevigo

これは、テーブルレイアウトを固定せずに機能します。tdまたはanyに追加するだけです。

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

Internet Explorerで動作するこれらのソリューションで問題が発生していました。

次のスタイルを使用して、最終的に機能するようにしました。

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

以下のCSSを使用できます。これにより、テキストがラップされ、テキストの最後に...が適用されます。

例えばThis_is_a_large_textはThis_is_a_larに変更されます...

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

完全なテキスト値を表示するツールチップを追加することもできます。

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

アルバースの答えは私のためにトリックをしました

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

JSで動的にロードするには

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

それが役に立てば幸い！！

0
Saurabh Valsangkar