やりたいこと
HTML上で「メールアドレス」という単語が画面幅の都合上、
メールア
ドレス
と改行されることがあり、これを
メール
アドレス
のように単語で区切って改行されるようにしたい。
結果
とりあえずこういう感じにマークアップすればよかった。
（注：実運用では間違ってもspan全体に指定しないこと）
<!doctype html>
<meta charset="utf-8">
<style> span { white-space: nowrap; } </style>
<div>
<span>私</span><wbr><span>は</span><wbr><span>日本語</span><wbr><span>を</span><wbr><span>勉強</span><wbr><span>して</span><wbr><span>い</span><wbr><span>ます。</span>
</div>
手で指定するにはあまりにも面倒なので、自動でやってくれるスクリプトがほしい。
が、形態素解析が必要なのでJSだけだと無理かも。
追記
全体をくくるだけで良かったようだ。多少楽になった。 ダメだったらしい、コメント参照
<!doctype html>
<meta charset="utf-8">
<style> .no-wrap { white-space: nowrap; } </style>
<div class="no-wrap">
私<wbr>は<wbr>日本語<wbr>を<wbr>勉強<wbr>して<wbr>い<wbr>ます。<wbr>
</div>
他に
なにかもっとシンプルなやり方があればコメント下さい。