小さな星がほらひとつ

読者です 読者をやめる 読者になる 読者になる

半角英数字は改行されないんだよ!!!!

スポンサーリンク

知らなかった.HTMLやCSSはノリとその場その場でやってきたから,まともなルールも理解していないことが判明してしまった.
ということで,HTML上では半角英数字は改行されないんですって.
単語の区切りが不明というのが理由っぽい.


全角だと幅いっぱいになったら,改行されます.


<table width="100%">
<th width="40%">幅40%
</th>
<td width="60%">幅60%:ああああああああああああああああああああああああああああああああああああいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
</td>
</table>

幅40% 幅60%:ああああああああああああああああああああああああああああああああああああいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい


半角だと...


<table width="100%">
<th width="40%">幅40%
</th>
<td width="60%">幅60%:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
</table>
幅40% 幅60%:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
このように,widthで指定したら幅すら守られていません.
ということで,以下の対策があるようです.


1.表の幅してにはtable-layoutを使うと良いのかも.
改行されない問題の解決にはなりませんでしたが,table-layoutを使うと,幅の固定だけはされました.


<table width="100%" style="table-layout:fixed">
<th width="40%">幅40%
</th>
<td width="60%">幅60%:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
</table>
幅40% 幅60%:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
このように,入りきらない文字は途中で消えていますが,幅の固定だけはされました.


2.word-breakのりよう(IE限定)
これはIE限定ですが,スタイルにword-breakを指定することで,半角全角に関わらず強制的に改行ができるようです.


<table width="100%" style="table-layout:fixed;word-break:break-all">
<th width="40%">幅40%
</th>
<td width="60%">幅60%:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
</table>
幅40% 幅60%:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

ただし,他のブラウザでは使えないため,根本的な解決方法は不明です...
だれか教えて><


今回利用した各スタイルの詳細は下記リンクを参照.
table-layout-スタイルシートリファレンス
word-break-スタイルシートリファレンス