Html

HTMLテーブルでのワードラップ



Word Wrap Html Table



私はword-wrap: break-wordテキストdivとspanを使用しています。ただし、テーブルセルでは機能しないようです。テーブルをwidth:100%に設定しています、1行2列。列のテキストは上記のword-wrapスタイル設定を使用しますが、折り返されません。これにより、テキストがセルの境界を超えます。これは、Firefox、Google Chrome、およびInternetExplorerで発生しました。

ソースは次のとおりです。



td { border: 1px solid }
Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word Short word

上記の長い単語は私のページの境界線よりも大きいですが、上記のHTMLと同じです。次の追加を試しましたtext-wrap:suppress with text-wrap:normal 、しかし誰も助けませんでした。

＃1階

デフォルトでは、テーブルは自動的に折り返されるため、テーブルセルがtable-cellとして表示されていることを確認してください。 ：



td { display: table-cell }

＃2階

ロングショットですが、 Firebug （または同様のツール）詳しく調べてみると、次のルールを誤って継承することはありません。

white-space:nowrap

これは上書きする可能性があります 指定した改行動作。

＃3階

これを行う良い方法はないことが判明しました。私が得る最も近いものは、「オーバーフロー：非表示」を追加することです。テーブルの周りのdivに移動し、テキストを失います。本当の解決策は、溝を放棄することのようです。 divと相対ポジショニングを使用すると、

を使用しなくても同じ効果を得ることができます。



2015年の更新： これらの答えが欲しい私のような人々に適しています。 6年間のハードワークの後、すべての貢献者に感謝します。

* { // this works for all but td word-wrap:break-word } table { // this somehow makes it work for td table-layout:fixed width:100% }

＃4階

賞金を獲得するための答えは正しいですが、 テーブル の最初の行 マージ/結合のあるセル （すべてのセルの幅が同じです）、答えは無効になります。

この場合、次を使用する必要がありますcolgroup with colラベルには正しく表示されています。

Merged cell
VeryLongWordInThisCell Cell 2

＃5階

longtextwithoutspace

または

longtextwithoutspace

＃6階

以下はInternetExplorerに適用されます。注意table-layout:fixed CSSプロパティの追加

td { border: 1px solid }
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord

＃7階

これは私のために働いた：

td { /* CSS 3 */ white-space: -o-pre-wrap word-wrap: break-word white-space: pre-wrap white-space: -moz-pre-wrap white-space: -pre-wrap }

そして、テーブルのプロパティは次のとおりです。

table { table-layout: fixed width: 100% }

＃8階

style =“ table-layout：fixed width：98％word-wrap：break-word”

デモ -http：//jsfiddle.net/Ne4BR/749/

これは私にとって素晴らしいことです。リンクが非常に長いため、Webブラウザでテーブルが100％を超えてしまいます。 IE、Chrome、Android、Safariでテスト済み。

＃9階

テーブルの境界線が必要ない場合は、次の手順を実行します。

table{ table-layout:fixed border-collapse:collapse } td{ word-wrap: break-word }

＃10階

コードを変更する

word-wrap: break-word

に

word-break:break-all

例

longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content Short Content

＃11階

オーバーフローパッケージを使用し、通常のテーブルレイアウト+テーブル幅ソリューションと100％互換性があります

https://jsfiddle.net/krf0v6pw/

HTML

wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

CSS

.content{ word-wrap:break-word /*old browsers*/ overflow-wrap:break-word } table{ width:100% /*must be set (to any value)*/ } .overflow-wrap-hack{ max-width:1px }

利点：

  • 使用する overflow-wrap:break-word word-break:break-allの代わりに。最初にスペースを壊そうとし、コンテナよりも大きい場合にのみ単語をカットするため、これはより良いでしょう。
  • いいえtable-layout:fixed必要table-layout:fixed 。通常の自動サイズ変更を使用します。
  • 固定をピクセル単位で定義する必要はありませんwidthまたはmax-width 。必要に応じて、親の%を定義します。

FF57、Chrome62、IE11、Safari11でテスト済み

＃12階

問題

longtextwithoutspace

テキストの場合ははい 持ってる たとえば、いくつかのスペース

long text with andthenlongerwithoutspaces

単語andthenlongerwithoutspacesが行のテーブルセルに収まり、long text with andthenlongerwithoutspaces不適切な場合、長い単語はlong text with andthenlongerwithoutspaces Rowではなく2つの部分に分割されます。

別の解決策：20文字ごとに長い単語ごとにU + 200Bを挿入します（ ZWSP 、、 U + 00AD（ ソフトハイフン ）またはU + 200C（ ZWNJ ）（ただし、以下の警告を参照してください）：

td { border: 1px solid }
Looooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooooooooo­oooooooooooooong word Short word

警告 ：他の長さゼロの文字を挿入しても、読み取りには影響しません。ただし、クリップボードにコピーされるテキストには影響します（もちろんこれらの文字はコピーされます）。クリップボードのテキストが後でWebアプリケーションの一部の検索機能で使用されると、検索が中断されます。この解決策は、いくつかの有名なWebアプリケーションで見られますが、可能であれば避けてください。

警告 ：他の文字を挿入するときは、グリフ内で複数のコードポイントを分離しないでください。詳細については、を参照してください。 https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries 。

＃13階

前述のように、テキストをdivほぼ実行可能に配置します。指定する必要があるのはdiv of width 、静的レイアウトには幸運です。

これは、FF 3.6、IE 8、Chromeに適用されます。

＃14F

longtexthere

＃15F

見る このデモ

LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord Foo

これは 読んだ リンク

＃16階

IE8およびChrome13でテスト済み。

longtexthere Foo

これにより、テーブルがページの幅に合わせられ、各列がその幅の50％を占めます。

最初の列でより多くのページを使用したい場合は、width: 80% of tdを追加します。以下の例では、選択した置換率は80％です。

longtexthere Foo

＃17階

実行する必要があるのは、幅を増やすことだけです。または内側実現するレイアウトによって異なります。

例えば：

looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word Foo

または

looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word Foo

＃18階

設定する必要があるようですword-wrap:break-word指定された（非相対）幅（div）がオンのブロック要素内。例えば：

loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word Foo

または、AbhishekSimonの提案に従って使用してくださいword-break:break-all 。

＃19F

Google ChromeおよびFirefoxで使用されるソリューション（Internet Explorerではテストされていません）は、ブロック要素としてdisplay: table-cellです。

＃20階

Firefox、Google Chrome、Internet Explorer7-9で機能するように見えるソリューションを見つけました。片側に長いテキストを配置するための2列のレイアウト。どこでも同様の問題を検索したり、あるブラウザで動作するブラウザが別の問題を壊したり、テーブルにタグを追加したりしましたが、コーディングが適切ではないようです。

私はこのためのフォームを使用しませんでした。 DL DTDDを救助します。少なくとも固定された2列のレイアウトの場合、これは基本的に語彙/辞書/意味の設定です。

いくつかの一般的なスタイルもあります。

dl { margin-bottom:50px } dl dt { background:#ccc color:#fff float:left font-weight:bold margin-right:10px padding:5px width:100px } dl dd { margin:2px 0 padding:5px 0 word-wrap:break-word margin-left:120px }
test1
Fusce ultricies mi nec orci tempor sit amet
test2
Fusce ultricies
longest
Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum, in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per.

フローティングワードラップと左マージンを使用して、必要なものを正確に取得できます。これを他の人と共有しようと思っただけで、2列スタイルのレイアウトで他の人を助け、テキストを折り返すのが難しくなるかもしれません。

テーブルセルでワードラップ関数を使用しようとしましたが、Internet Explorer 9（およびもちろんFirefoxとGoogle Chrome）でのみ機能し、主にここで壊れたInternetExplorerブラウザーを修復しようとしています。