固定表レイアウトtd単語が折り返しなし

異なる長さのテキストで表が作成されています。私はそれが横のスクロールバーを作成する親の外にテーブルを押し続けるので、テーブルレイアウトCSSプロパティを固定に設定しました。固定表レイアウトtd単語が折り返しなし

私は自分のtdを親のフルサイズになるテーブルの半分にしたい。私は自分のテキストをtdの中で折り返したい。私はそれが他のテキストに重ならないように、テキストが約20をラップしたい

enter image description here

：ここでのように見えるものです。 <br />は使用できません。

ここにはjsFiddleの問題があります。

を編集してください：Nick Beranekこの質問に回答しましたが、これが原因です。このような表に<p>のタグがないと、デフォルトでCSSを追加せずに単語が折り返されます。誰かがこの状況でうまくいかない理由を私に説明してもらえますか？

あなたのケースで起こる理由は、ブラウザが単語を壊す場所を知らないということです。スペースがないので、ボックスモデルが破損します。 –

pでword-wrap: break-wordを使用できます。あなたのjsFiddleで動作し、Microsoftが開発したIEと互換性があります。

2012-02-21 15:35:56

ありがとうございました！:) –

なぜこのCSSプロパティを追加する必要があるのでしょうか？通常の状況では、pタグがこのような状況にないとき、私はそれらがここでやると期待しているように単語が折り返します。 –

テキストにスペースが含まれていないため、ブラウザはそれを1つの長い単語と見なします。 CSS宣言がされていない限り、ブラウザは長い言葉をラップしません。 –

コンテナの幅を小さく設定すると、コンテナの幅を増やすと、Check JSFiddle for demo、幅250が正確な20の位置に壊れます。

#container 
{ 
    width: 250px; 
} 
p 
{ 
word-wrap: break-word 
}

2012-02-21 15:36:00

私はそれがこのより小さい幅である必要があります。 –

壊れていないのは、文字列に空白がないためです。数字のセットにスペースを追加するとすぐに、それは壊れます。したがって、これを修正する1つの方法は、pセレクタにword-wrap:break-workを割り当てることです。

2012-02-21 15:39:06 bassplayer7

答えて