html - HTML の大きな単語で表のサイズ変更を無効にする方法

Question

私はこのDIVを持っています

<div style="width:500px;"> </div>

その中にテーブルを挿入しました

<table style="width:100%;">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>

通常の単語が含まれている場合、100 個の単語の間にスペースが含まれていても、テーブルは div 内のサイズを維持しますが、セルに 100 文字程度の単語が 1 つ含まれている場合、テーブルは<td></td>親の div の外でより大きなサイズになります。テーブルの拡大を非表示にするのは良いことですが、通常の単語で通常行うようにoverflow:hidden;、サイズを同じままにして、セルを拡大したいです。height

Answer 1

word-wrap古い IE 固有の CSS ルールです。最新のブラウザーでワード ラップを取得するには、 を使用しますwhite-space。また、設定max-widthは物事を機能させるのに役立つようです。

td {
  border: 1px solid black;
  width: 100px;
  max-width: 100px;
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
}

jsFiddle デモ

Answer 2

で指定されているように、テーブルmax-widthを絶対値に設定しますparent div。

試す：

<table style="width:100%; max-width:500px;">
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

Answer 3

CSSword-wrapプロパティを使用します。

td {
     word-wrap: break-word;
}