Hatena::ブログ(Diary)

hinimiの偏頭痛 このページをアンテナに追加 RSSフィード

2009-04-22

wordBreak.js使用時の注意点

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"を指定するテーブルはインデントを揃えるのは諦め、左端からソースを書きましょう。

FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」

wordBreak.js

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/hinimi/20090422/1240400101