2009-04-22
wordBreak.js使用時の注意点
下記はサンプルソースです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>wordBreakTest</title> <script language="javascript" src="../js/wordBreak.js"></script> <style> .wordBreak { word-break:break-all; } </style> </head> <body> <table border="1"class="wordBreak" width="100"> <tr> <th width="100">aaaaaaaaak</th> </tr> <tr> <td width="100">iiiiiiiiiiiiiiiiii</td> </tr> </table> </body> </html>
よく分からないけど、インデント(タブ)を消したらレイアウト崩れが解消されました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>wordBreakTest</title> <script language="javascript" src="../js/wordBreak.js"></script> <style> .wordBreak { word-break:break-all; } </style> </head> <body> <table border="1"class="wordBreak" width="100"> <tr> <th width="100">aaaaaaaaak</th> </tr> <tr> <td width="100">iiiiiiiiiiiiiiiiii</td> </tr> </table> </body> </html>
結論:class="wordBreak"を指定するテーブルはインデントを揃えるのは諦め、左端からソースを書きましょう。
トラックバック - http://d.hatena.ne.jp/hinimi/20090422/1240400101