プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
HTML、半角文字のみでもtableのセル内で自動改行する。
HTMLを触っていればtableタグにはよくお世話になります。
ほんで幅指定をしてレイアウト調整したりする場合もあります。
てか大抵の場合は幅を指定しますよね。

ところがどっこい「abcdefghijklmnopqrstuvwxyz」とか書くと
幅指定が無視されて横にうにょ~んと長くなってしまいます。

これは英語圏の皆様向けの仕様なんだそーな。
要は英単語の途中で改行されるとおかしな感じだから
半角スペースが出てくるまで改行しねーぜな仕様らしい。

こう書くとφ(--)

  <table>
      <tr>
          <td style="width: 70px;border: 1px solid #000;">abcdefghijklmnopqrstuvwxyz</td>
      </tr>
  </table>

こんなんなってφ(--)

abcdefghijklmnopqrstuvwxyz



こう書くとφ(--)

  <table>
      <tr>
          <td style="width: 70px;border: 1px solid #000;">abcdefghijklmn opqrstu vwxyz</td>
      </tr>
  </table>

※「n」と「o」の間、「u」と「v」の間に半角スペースが入っています。

こんなんなるφ(--)

abcdefghijklmn opqrstu vwxyz


日本人的にはBoooo!
幅指定優先しろよ!レイアウト崩れるんだよ!
と思ったらこんな指定をするとφ(--)

  <table>
      <tr>
          <td style="width: 70px;border: 1px solid #000;
word-break: break-all;">abcdefghijklmnopqrstuvwxyz</td>
      </tr>
  </table>


こんなんなってアルファベットが続いても改行されるらしいφ(--)

abcdefghijklmnopqrstuvwxyz


ただこれ、FirefoxとかOperaだと効かないのですね(--ゞ
困ってたらこんなん見つけましたφ(--)

■word-break:break-allをFirefox等でも実現するjavascript
http://webtech-walker.com/archive/2008/11/02151611.html


ありがたや~(-人-)
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● HTML・CSS  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト 

  関連記事