HTMLで半角英数などで長い文字列がくると、改行されずにそのまま頑張って表示しちゃってデザインが崩れるってことありますよね。
今回はそれをどうにかブロックの中におさまるように強制的に改行させるという試み。

ブロックの長さに合わせて強制的に改行させる方法としては、
CSSでword-break : break-all; と指定するとできたりするが、
いかんせんIEだけの仕様だったりする。
スタイルシートリファレンス > word-break
将来的にはCSS3で採用されるかもしれないとはいってるけど、そんなの待ちきれません。
他には<WBR>タグとかありますが、仕様にない拡張タグらしく、またもIEしか対応してないというトラップ
HTMLタグリファレンス > <WBR>
こうなればサーバ側で処理して改行させればいいやってことで今回はPHPで改行させる処理を考えてみた。

/** * getBreakLine * * @param mixed $values * @access public * @return void * * @require length * @require string */ function getBreakLine ($values) { // 半角英数字が連続して指定文字数以上ある場合に，文字列に改行を挿入 $pattern = '/[\\d\\w!-%\'-\\/:=\\?@\\[-`\\{-\\~]{'. $values['length']. '}/'; $res = preg_match_all($pattern, $values['string'], $match); var_dump($match); if ($res) { // 指定文字列以上のワードがあったら改行する foreach ($match[0] as $value) { $pattern = "/{$value}/"; $values['string'] = preg_replace($pattern, "{$value}<br />", $values['string']); } return $values['string']; } else { return $values['string']; } } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

/** * getBreakLine * * @param mixed $values * @access public * @return void * * @require length * @require string */ function getBreakLine ($values) { // 半角英数字が連続して指定文字数以上ある場合に，文字列に改行を挿入 $pattern = '/[\\d\\w!-%\'-\\/:=\\?@\\[-`\\{-\\~]{'. $values['length']. '}/'; $res = preg_match_all($pattern, $values['string'], $match); var_dump($match); if ($res) { // 指定文字列以上のワードがあったら改行する foreach ($match[0] as $value) { $pattern = "/{$value}/"; $values['string'] = preg_replace($pattern, "{$value}<br />", $values['string']); } return $values['string']; } else { return $values['string']; } } }

使うときはこんな感じ

$values = array( 'string' => 'asf sdfj sdfh TtttTtttttttttttttttt! jhdaaaaaaaaaaaaaaaaajf fh', // 対象文字列 'length' => 19 // 最大文字数を指定 ); $res = getBreakLine($values);

1 2 3 4 5

$values = array( 'string' => 'asf sdfj sdfh TtttTtttttttttttttttt! jhdaaaaaaaaaaaaaaaaajf fh', // 対象文字列 'length' => 19 // 最大文字数を指定 ); $res = getBreakLine($values);

実行結果

asf sdfj sdfh TtttTtttttttttttttt tt! jhdaaaaaaaaaaaaaaaa ajf fh"

1 2 3

asf sdfj sdfh TtttTtttttttttttttt tt! jhdaaaaaaaaaaaaaaaa ajf fh"

いい感じで動いてます。
これでとりあえずデザインが崩れることなく安心に生きていけます。