web-dev-qa-db-ja.com

テーブル内で「ワードラップ：ブレークワード」を使用する

可能性のある複製：
htmlテーブルでのワードラップ

このテキストは、Google Chrome（およびその他の最新のブラウザー）で私が望むとおりに動作します。

<div style="border: 1px solid black; width:100%; Word-wrap: break-Word;">
  <p>
    aaaaaaaaaaaaaaaa
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
  </p>
</div>

  1. ブラウザの幅が十分に広い場合、a +とb +は同じ行にあります。

    aaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

  2. ブラウザを絞り込むと、a +とb +が別々の行に表示されます。

    aaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

  3. B +が収まらなくなると、壊れて2行になります（合計3行）。

    aaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbb

それはすべて素晴らしいです。

ただし、私の状況では、これはdivではなくtableであり、次のようになります。

<table style="border:1px solid black; width:100%; Word-wrap:break-Word;">
  <tr>
    <td>
      <p>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      </p>
    </td>
  </tr>
</table>

この場合、＃1と＃2が発生しますが、＃3は発生しません。つまり、ステップ2とステップ3が発生しないと、テーブルの縮小が停止します。ブレークワードはフィルタリングされていないようです。

誰もが＃3を実現する方法を知っていますか？このソリューションは、Chromeでのみ動作する必要がありますが、さらに優れた他のブラウザーでも動作しました。

追伸「テーブルを使用しない」は役に立ちません。

cssgoogle-chromehtml-tableword-wrap
75
Matthew Simoneau

table-layout: fixedは、セルを強制的にテーブルに合わせます（逆ではありません）。例：

<table style="border: 1px solid black; width: 100%; Word-wrap:break-Word;
              table-layout: fixed;">
  <tr>
    <td>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    </td>
  </tr>
</table>
133
Matthew Simoneau

これを試すことができます：

td p {Word-break:break-all;}

ただし、これは、<br>タグを追加しない限り、十分なスペースがあるときに次のように表示されます。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

したがって、可能であれば、改行がある場所に<br>タグを追加することをお勧めします。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

http://jsfiddle.net/LLyH3/3/

また、これで問題が解決しない場合は、同様のスレッド here があります。

21
Herman Schaaf