☰

HTML テーブルでのワードラップ 質問する

tag-icon • tag-icon html css html-table
HTML テーブルでのワードラップ 質問する

私は と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、どちらも役に立ちませんでした。

ベストアンサー1

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

td {
  border: 1px solid;
}
<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
    </td>
    <td>Short word</td>
  </tr>
</table>

おすすめ記事