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

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

ソースは次のようになります。

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>

上記の長い単語は私のページの境界よりも大きいですが、上記のHTMLでは壊れません。私は、追加の以下の提案を試みたtext-wrap:suppressとtext-wrap:normal、しかし助けでもありません。

以下はInternet Explorerで動作します。table-layout:fixedCSS属性の追加に注意してください

td {
  border: 1px solid;
}

<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

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

または

<span style="word-break:break-all;">longtextwithoutspace</span>

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

white-space:nowrap;

これにより、指定した改行の動作が上書きされる場合があります。

これを行う良い方法はないことがわかりました。私が来た最も近いのは「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%;
}

既に述べたように、テキストを中に置くことはdivほとんど機能します。あなただけ指定する必要widthのdiv静的なレイアウトのために幸運であるが、。

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

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

オーバーフローラップを使用し、通常のテーブルレイアウト+テーブル幅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。最初にスペースで区切ろうとし、コンテナよりも単語が大きい場合にのみ単語を切り捨てるので、これはより良い方法です。
• table-layout:fixed必要ありません。通常の自動サイズ設定を使用します。
• ピクセル単位で固定widthまたは固定を定義する必要はありませんmax-width。%必要に応じて親を定義します。

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

コードを変更する

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>

の問題

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

テキストにいくつかのスペースがある場合、それはあまりうまくいきません、例えばです

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

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

代替ソリューション：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を参照してください。

このデモをチェックしてください

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

ここに読むためのリンクがあります

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％を占めます。

最初の列がページを占めるようにしたい場合は、次の例のようにa width: 80%をに追加し、td80％を選択したパーセンテージに置き換えます。

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

実行する必要があるのは、達成したいレイアウトに応じて、<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>

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

この場合、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>

<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>

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

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

またはword-break:break-allAbhishek Simonの提案に従って使用します。

これは私にとってはうまくいきます：

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

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

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

Firefox、Google Chrome、Internet Explorer 7-9で機能するように見えるソリューションを見つけました。片側に長いテキストがある2列のテーブルレイアウトを実行するため。私は同様の問題を探し回っていましたが、1つのブラウザーで機能したものが他のブラウザーを壊したり、テーブルにタグを追加したりすると、コーディングが悪いように見えます。

これにはテーブルを使用しませんでした。DL DT DDが救助に。少なくとも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;
    }

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

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

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

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

td {
   display: table-cell;
}

style = "table-layout：fixed; width：98％; word-wrap：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/

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

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

あなたに合うならこれを試すことができます...

td内にtextareaを置き、背景色を白で無効にして、行数を定義します。

<table style="width: 100%;">
  <tr>
    <td>
        <textarea rows="4" style="background-color:white;border: none;" disabled>      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </textarea>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>