web-dev-qa-db-ja.com

HTML TD折り返しテキスト

<td>要素に追加されたテキストをラップします。 style="Word-wrap: break-Word;" width="15%"で試しました。しかし、それはテキストをラップしていません。幅を100％にすることは必須ですか？表示する他のコントロールがあるので、15％の幅しか使用できません。

htmlcsshtml-tableword-wrap
116
sagar

TDテキストを折り返すには

最初のセットテーブルスタイル

table{
    table-layout: fixed;
}

次に、TD St​​yleを設定します

td{
    Word-wrap:break-Word
}
200
Jitender Mahlawat

HTMLテーブルは、「table-layout：fixed」cssスタイルをサポートします。これにより、ユーザーエージェントはコンテンツに列幅を適応できなくなります。あなたはそれを使いたいかもしれません。

47
Alsciende

テーブルのキャッチ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％を取得して、その列の最初のTD（またはTHヘッダーがある場合は、もう一度、ピクセル単位で。

27
scunliffe

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>
11
Costin
.tbl {
    table-layout:fixed;
    border-collapse: collapse;
    background: #fff;
 }

.tbl td {
    text-overflow:Ellipsis;
    overflow:hidden;
    white-space:nowrap;
}

http://www.blakems.com/archives/000077.html へのクレジット

10
Samuel Adam

これはいくつかのcssフレームワーク（マテリアルデザインライト[MDL]）で機能しました。

table {
  table-layout: fixed;
  white-space: normal!important;
}

td {
  Word-wrap: break-Word;
}
5
All Іѕ Vаиітy

これは本当にうまくいきます：

<td><div style = "width:80px; Word-wrap: break-Word"> your text </div></td>

すべての<divに同じ幅を使用するか、それぞれの場合に幅を調整して、好きな場所でテキストを分割できます。

このように、固定のテーブル幅や複雑なcssでだまされる必要はありません。

3
Betty Mock

セルの幅をテキストの最長ワードとまったく同じにするには、セルの幅を1pxに設定するだけです

つまり.

td {
  width: 1px;
}

これは実験的であり、試行錯誤

ライブフィドル： http://jsfiddle.net/harshjv/5e2oLL8L/2/

2
Harsh Vakharia

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

これは機能する可能性がありますが、将来のある時点で（すぐにではないにしても）少し厄介なものになるかもしれません。

<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>がコンテンツに合わせて拡張するのに対し、<span>は設定された幅を与えられ、維持されると予想されることです。 overflow: hiddenは、そうでなければ<td>を展開する原因となるものを隠すことを意図していますが、そうではないかもしれません。

ビジュアルセルに存在する（またはクリップされた）テキストを表示するために、スパンのtitleプロパティを使用することをお勧めします。これにより、テキストを引き続き使用できます（そして、もし人々がそれを見たくない/必要ないなら、なぜそもそも、それは...）。

また、td {...}の幅を定義すると、tdはその暗黙の幅を埋めるために拡張（または潜在的に縮小）します（見たところ、これはtable-width/number-of-cellsのようです）、指定されたテーブル幅は見えません同じ問題を作成します。

欠点は、プレゼンテーションに使用される追加のマークアップです。

1
David Thomas

実際、テキストの折り返しはテーブルで自動的に行われます。テスト中に犯す失敗者は、仮説的に「ggggggggggggggggggggggggggggggggggggggggggggggg」のような長い文字列を想定し、折り返さないと文句を言うことです。実際には、これほど長い英語の単語はなく、たとえあるとしても、その<td>内で使用される可能性はわずかにあります。

「対立は事前に決定された状況では迷信的である」のような文でテストしてみてください。

1
John
<!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>
0
N Islam

クラスを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>
0
Elle