web-dev-qa-db-ja.com

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

私はdivsとspansでテキストをラップするためにWord-wrap: break-Wordを使っています。ただし、テーブルセルでは機能しないようです。 1行2列のテーブルをwidth:100%に設定しました。上記のWord-wrapでスタイル付けされていても、列内のテキストは折り返されません。テキストがセルの境界を超えて移動します。これはFirefox、Google Chrome、およびInternet Explorerで発生します。

これが、ソースがどのように見えるかです。

td {
  border: 1px solid;
}
<table style="width: 100%;">
  <tr>
    <td>
      <div style="Word-wrap: break-Word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong Word
      </div>
    </td>
    <td><span style="display: inline;">Short Word</span></td>
  </tr>
</table>

上記の長いWordは私のページの境界よりも大きいですが、上記のHTMLではうまくいきません。以下のtext-wrap:suppressとtext-wrap:normalを追加する提案を試みましたが、どちらも助けにはなりませんでした。

htmlcsshtml-table
519
psychotik

以下はInternet Explorerで私のために働きます。 table-layout:fixed CSS属性の追加に注意してください

td {
  border: 1px solid;
}
<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="Word-wrap: break-Word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>
585
Marc Stober
<td style="Word-break:break-all;">longtextwithoutspace</td>

または

<span style="Word-break:break-all;">longtextwithoutspace</span>
141
Pratik Stephen

ロングショットですが、 Firebug （または同様のもの）を使用して、次の規則を誤って継承していないことを確認してください。

white-space:nowrap;

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

111
Rick Grundy

これを行うための良い方法はありません。一番近いのは "overflow：hidden;"を追加することです。テーブルの周りのdivにテキストを失う。本当の解決策はしかしテーブルを捨てることのようです。 divと相対位置を使用して、<table>の遺産を除いて、同じ効果を得ることができました

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%;
}
43
psychotik

すでに述べたように、テキストをdiv内に置くことはほとんどうまくいきます。あなたはwidthのdivを指定する必要があります。これは静的なレイアウトにとっては幸運なことです。

これはFF 3.6、IE 8、Chromeで動作します。

<td>
  <div style="width: 442px; Word-wrap: break-Word">
    <!-- Long Content Here-->
  </div>
</td>
27
loungerdork

オーバーフローラップを使用し、通常のテーブルレイアウト+テーブル幅100％で正常に機能する回避策

https://jsfiddle.net/krf0v6pw/

_ html _ 

<table>
  <tr>
    <td class="overflow-wrap-hack">
      <div class="content">
        wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
      </div>
    </td>
  </tr>
</table>

_ 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 を使用します。これは、最初にスペースで分割しようとし、Wordがコンテナーよりも大きい場合にのみWordを遮断するため、より効果的です。
  • table-layout:fixedは必要ありません。通常の自動サイズ調整を使用してください。
  • 固定widthまたは固定max-widthをピクセル単位で定義する必要はありません。必要に応じて、親の%を定義してください。

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

18
Alph.Dev

コードを変更する

Word-wrap: break-Word;

に

Word-break:break-all;

例

<table style="width: 100%;">
  <tr>
    <td>
      <div style="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</div>
    </td>
    <td><span style="display: inline;">Short Content</span>
    </td>
  </tr>
</table>
17
Duc Nguyen

の問題

<td style="Word-break:break-all;">longtextwithoutspace</td>

text が いくつかのスペースを持っていると、あまりうまくいかないでしょう。

<td style="Word-break:break-all;">long text with andthenlongerwithoutspaces</td>

Wordのandthenlongerwithoutspacesが1行でセルに収まるがlong text with andthenlongerwithoutspacesが収まらない場合、長いWordは折り返されるのではなく2行に分割されます。

別の解決策：毎回長いWordにU + 200B（ _ zwsp _ ）、U + 00AD（ ソフトハイフン ）、またはU + 200C（ _ zwnj _ ）を挿入20文字目（ただし、下記の警告を参照）：

td {
  border: 1px solid;
}
<table style="width: 100%;">
  <tr>
    <td>
      <div style="Word-wrap: break-Word;">
        Looooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooong Word
      </div>
    </td>
    <td><span style="display: inline;">Short Word</span></td>
  </tr>
</table>

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

警告 ：追加の文字を挿入するときは、書記内で複数のコードポイントを区切らないでください。詳細については https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries を参照してください。

15
Piotr Findeisen

IE 8とChrome 13でテスト済み。

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td>
              <div style="Word-wrap: break-Word;">
                 longtexthere
              </div>
        </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

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

最初の列でもっとページを占有したい場合は、次の例のようにtdにwidth: 80%を追加し、80％を選択した割合で置き換えます。

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td style="width:80%">
               <div style="Word-wrap: break-Word;">
                 longtexthere
               </div>
            </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>
10
Waylon Flinn

必要なことは、達成したいレイアウトに応じて<td>または<div>内の<td>に幅を追加することだけです。

例えば：

<table style="width: 100%;" border="1"><tr>
<td><div style="Word-wrap: break-Word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng Word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>

または

 <table style="width: 100%;" border="1"><tr>
    <td width="100" ><div style="Word-wrap: break-Word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng Word</div></td>
    <td><span style="display: inline;">Foo</span></td>

</tr></table>
9
ShalomSam

チェックアウト このデモ

<table style="width: 100%;">
<tr>
    <td><div style="Word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
    </td>
    <td>
        <span style="display: inline;">Foo</span>
    </td>
</tr>
</table>

これは read へのリンクです。

9
abi1964

賞金を獲得した答えは正しいですが、 テーブルの最初の行に結合/結合されたセルがある場合はうまくいきません （すべてのセルの幅が等しくなります）。

この場合、正しく表示するにはcolgroupタグとcolタグを使用する必要があります。

<table style="table-layout: fixed; width: 200px">
<colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
</colgroup>
<tr>
    <td colspan="2">Merged cell</td>
</tr>
<tr>
    <td style="Word-wrap: break-Word">VeryLongWordInThisCell</td>
    <td style="Word-wrap: break-Word">Cell 2</td>
</tr>
</table>
8
Indrek
<p style="overflow:hidden; width:200px; Word-wrap:break-Word;">longtexthere<p>
8
Sarawut Positwinyu

指定された（相対的でない）幅でブロック要素（div）にWord-wrap:break-Word;を設定する必要があるようです。例：

<table style="width: 100%;"><tr>
    <td><div style="display:block; Word-wrap: break-Word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong Word</div></td>
    <td><span style="display: inline;">Foo</span></td>
</tr></table>

またはAbhishek Simonの提案に従ってWord-break:break-allを使用してください。

7
stslavik

これは私のために働く：

<style type="text/css">
    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%
   }

</style>
5
Lavekush Agrawal

テーブルの枠線が必要ない場合は、これを適用します。

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    Word-wrap: break-Word;
}
4
Fusion

テーブルはデフォルトで折り返されるので、テーブルセルの表示がtable-cellであることを確認してください。

td {
   display: table-cell;
}
3
ironsam

Firefox、Google Chrome、Internet Explorer 7-9で動作するように思われる解決策を見つけました。片側に長いテキストがある2列の表レイアウトを実行します。私はよく似た問題を探してみましたが、あるブラウザでうまくいったことが他のブラウザを壊したり、テーブルにタグを追加したりすることは悪いコーディングのようです。

これにはテーブルを使用しませんでした。 DL DT救助へのDD。少なくとも2列のレイアウトを修正するために、それは基本的に用語集/辞書/言葉を意味する設定です。

<dl>
    <dt>test1</dt>
    <dd>Fusce ultricies mi nec orci tempor sit amet</dd>
    <dt>test2</dt>
    <dd>Fusce ultricies</dd>
    <dt>longest</dt>
    <dd>
        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.
    </dd>
</dl>

そしていくつかの一般的なスタイリング。

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;
}

フローティングのワードラップと余白を使って、私はまさに必要なものを手に入れました。これを他の人と共有したいと思っただけで、2列の定義スタイルのレイアウトを持つ人が役に立つかもしれません。

私はテーブルセルでワードラップを使ってみましたが、それは主にここで壊れたInternet Explorerブラウザを直そうとするInternet Explorer 9（そしてもちろんFirefoxとGoogle Chrome）でしか動かなかった。

3
Yogurt The Wise

style = "テーブルレイアウト：固定、幅：98％、ワードラップ：break-Word"

<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; Word-wrap:break-Word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >

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

これは私にとってとてもうまくいった。私はテーブルがウェブブラウザ上で100％を超える原因となる長いリンクを持っていました。 IE、Chrome、Android、Safariでテスト済み。

1
Bobby

Google ChromeおよびFirefox（Internet Explorerではテストされていません）で機能する解決策は、display: table-cellをブロック要素として設定することです。

0
Antoine Guiral