<td>要素に追加されたテキストをラップしたい。で試しましたstyle="word-wrap: break-word;" width="15%"。しかし、それはテキストを折り返していません。100％の幅を与えることは必須ですか？表示する他のコントロールがあるため、15％の幅しか使用できません。
回答:
TDテキストを折り返すには
最初のセットテーブルスタイル
table{
table-layout: fixed;
}
次に、TDスタイルを設定します
td{
word-wrap:break-word
}
white-space: normal、ラッピングが機能するようにするには、tdスタイルで使用する必要がありました（ではなくword-wrap:break-word）
white-space:normal;
white-space: pre-wrap空白を保持する必要がある場合に使用します。
テーブルのキャッチ22に遭遇したと思います。テーブルは、コンテンツを表形式の構造にまとめるのに最適であり、含まれるコンテンツのニーズを満たすために「ストレッチ」というすばらしい仕事をします。
デフォルトでは、表のセルはコンテンツに合わせて伸縮します...したがって、テキストは幅を広げます。
いくつかの解決策があります。
1.）TDで最大幅を設定してみてください。
<td style="max-width:150px;">2.）テキストを折り返し要素（スパンなど）に入れて、制約を設定することができます。
<td><span style="max-width:150px;">Hello World...</span></td>古いバージョンのIEはmin / max-widthをサポートしていないことに注意してください。
IEはネイティブでmax-widthをサポートしていないので、強制したい場合はハックを追加する必要があります。ハックを追加する方法はいくつかありますが、これは1つにすぎません。
ページ読み込み時に、IE6の場合のみ、テーブルのレンダリングされた幅（ピクセル単位）を取得し、その15％を取得して、その列の幅として、その列（またはヘッダーがある場合はTH）の最初のTDにピクセル単位で再度適用します。 。
table-layout:fixed拡大する細胞の問題を解決しますが、新しい問題を作成します。IEはデフォルトでオーバーフローを非表示にしますが、Mozillaはそれをボックスの外側にレンダリングします。
別の解決策は、使用することです： overflow:hidden;width:?px
<table style="table-layout:fixed; width:100px">
<tr>
<td style="overflow:hidden; width:50px;">fearofthedarkihaveaconstantfearofadark</td>
<td>
test
</td>
</tr>
</table>.tbl {
table-layout:fixed;
border-collapse: collapse;
background: #fff;
}
.tbl td {
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}これは、いくつかのcssフレームワーク（マテリアルデザインライト[MDL]）で私に役立ちました。
table {
table-layout: fixed;
white-space: normal!important;
}
td {
word-wrap: break-word;
}使用word-breakそれはスタイリングすることなく使用することができるtableにtable-layout: fixed
table {
width: 140px;
border: 1px solid #bbb
}
.tdbreak {
word-break: break-all
}<p>without word-break</p>
<table>
<tr>
<td>LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
</tr>
</table>
<p>with word-break</p>
<table>
<tr>
<td class="tdbreak">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
</tr>
</table>これは本当にうまくいきます：
<td><div style = "width:80px; word-wrap: break-word"> your text </div></td> すべてのに同じ幅を使用することも<div、それぞれの幅を調整して、好きな場所でテキストを分割することもできます。
この方法では、固定されたテーブル幅や複雑なcssをいじる必要はありません。
セルの幅をテキストの最も長い単語と正確に一致させるには、セルの幅を 1px
すなわち
td {
width: 1px;
}これは実験的なもので、試行錯誤しながら知った
ライブのフィドル：http : //jsfiddle.net/harshjv/5e2oLL8L/2/
これは機能する可能性がありますが、将来のある時点で（すぐではないにしても）少し厄介なことが判明する可能性があります。
<style>
tbody td span {display: inline-block;
width: 10em; /* this is the nuisance part, as you'll have to define a particular width, and I assume -without testing- that any percent widths would be relative to the containing `<td>`, not the `<tr>` or `<table>` */
overflow: hidden;
white-space: nowrap; }
</style>
...
<table>
<thead>...</thead>
<tfoot>...</tfoot>
<tbody>
<tr>
<td><span title="some text">some text</span></td> <td><span title="some more text">some more text</span></td> <td><span title="yet more text">yet more text</span></td>
</tr>
</tbody>
</table>の理論的根拠は、span他の人が指摘した<td>ように、a は通常、コンテンツを収容するために拡張<span>されますが、aは設定された幅を指定して保持することが期待できます。これoverflow: hiddenは、そうでなければ<td>展開する原因を隠すことを目的としていますが、そうではない場合があります。
titleスパンのプロパティを使用して、ビジュアルセルに存在する（またはクリップされた）テキストを表示して、テキストを引き続き利用できるようにすることをお勧めします。そもそも…。
また、td {...}tdの幅を定義すると、暗黙の幅を満たすように拡張される（または縮小される可能性がありますが、疑問ですtable-width/number-of-cells）、指定されたtable-widthは作成されないようです同じ問題。
欠点は、プレゼンテーションに使用される追加のマークアップです。
実際、テキストの折り返しはテーブルで自動的に行われます。テスト中に犯す失敗は、「ggggggggggggggggggggggggggggggggggggggggggggg」のような長い文字列を仮定して、折り返さないと不平を言うことです。実際、英語にはこれほど長い単語はなく、たとえそれがあったとしても、その中で使用される可能性はわずかです<td>。
「対決は事前に決定された状況では迷信である」のような文でテストしてみてください。
クラスをTDに適用し、適切な幅を適用して（幅のないものを残して、残りの幅を想定するようにしてください）、適切なスタイルを適用します。以下のコードをコピーしてエディターに貼り付け、ブラウザーで表示して機能を確認します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
td { vertical-align: top; }
.leftcolumn { background: #CCC; width: 20%; padding: 10px; }
.centercolumn { background: #999; padding: 10px; width: 15%; }
.rightcolumn { background: #666; padding: 10px; }
-->
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="leftcolumn">This is the left column. It is set to 20% width.</td>
<td class="centercolumn">
<p>Hi,</p>
<p>I want to wrap a text that is added to the TD. I have tried with style="word-wrap: break-word;" width="15%". But the wrap is not happening. Is it mandatory to give 100% width ? But I have got other controls to display so only 15% width available.</p>
<p>Need help.</p>
<p>TIA.</p>
</td>
<td class="rightcolumn">This is the right column, it has no width so it assumes the remainder from the 15% and 20% assumed by the others. By default, if a width is applied and no white-space declarations are made, your text will automatically wrap.</td>
</tr>
</table>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Poem</th>
<th>Poem</th>
</tr>
<tr>
<td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
<td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
</tr>
</table>
<p>The nowrap attribute is not supported in HTML5. Use CSS instead.</p>
</body>
</html>