テーブル内の単語をHTMLで囲む方法は？

Question

ビデオコースの指示に従ってthis html fileを作った。しかし、何らかの理由で、CSSスタイルシートで遊んでいてもセルのサイズを適切に設定していません。ここでは、テーブルのためのコードスニペットは、次のとおりです。

<table id="table1" cellspacing="40"> 
    <tr> 
     <td><h3>Home</h3>"ksdjfkl;dajkfdl;sajfkldsjlsfl;saflklfas"<a href="about.html">more</a></td> 
     <td><h3>About</h3>"dkfjakldfjdklsafjkldsjfvklzjvklz;cjv"<a href="about.html">more</a></td> 
     <td><h3>Contact</h3>"jvkl;jkdlfjaklda;fjkdlsafjdlsfkd;"<a href="contact.html">more</a></td> 
    </tr> 
</table> 

ここでは、テーブルに関連のあるコードスニペットです：

#table1{ 
width: 750px; 
height: 250px; 
table-layout: fixed; 
margin-left: 20px; 
} 

#table1 td{ 
text-align: left; 
background: #d8d8d8; 
font-size: 14px; 
padding: 15px; 
border-radius: 10px; 
-moz-border-radius: 10px; 
box-shadow: 0px 0px 10px #000000; 
-moz-box-shadow: 0px 0px 10px #000000; 
} 

#table1 h3{ 
text-align: center; 
font-family: Pristina; 
font-size: 20px; 
} 

これは、ページの結果である：

私が持っています#table1 td{ ... }に設定を追加する必要があると感じました。しかし、width = somepixelsを#table1 td{ ... }に追加しても外観に問題があります。それを修正するためのあなたの推奨は何ですか？

ありがとうございます！

Answer 1

使用CSS word-wrapプロパティ：

#table1 td { 
    word-wrap: break-word; 
} 

Answer 2

はあなたの文字列を壊すに適用するロジックを定義します。おそらく "ksdjfkl; dajkfdl; sajfkldsjlsfl; saflklfas"などは実際のデータではないので、どのロジックを適用すべきかを推測することは不可能です。それは実際の例として、またはいくつかの不可解なコードである場合しかし、あなたはおそらく（のみ）、セミコロンの後に改行を許可する必要があります。word-wrap: break-wordはほとんど英語や他の西欧言語のため、これまで適切な、と確かにない適切ではありません使用

ksdjfkl;<wbr>dajkfdl;<wbr>sajfkldsjlsfl;<wbr>saflklfas 

。

特殊文字の後に改行を入れるには、<wbr>を使用します。自然言語の単語の内部でハイフネーションを許可するには、ソフトハイフン（またはそのエンティティリファレンス­）を使用します。