日本語の改行を制御するサンプルです。
スマホはいろんな横幅があり、PCも横幅はユーザの操作次第なので、コントロールできるようにしたいです。
まず以下のCSSを用意します。
<style>
.demo_area{
width:200px;
overflow: hidden;
border:solid 1px #F00;
font-size:14px;
margin:10px;
}
.demo_wb{
word-break: keep-all;
word-wrap: normal;
}
</style>
そして以下のHTMLを用意します。
<div class="demo_area">
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん
</div>
<div class="demo_area demo_wb">
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん
</div>
実行結果はこちら
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん
横幅を固定して、連なる長い単語、あるいは文章として認識されない場合、上記の前者は改行が自然にされて、後者は改行をしない指定をしています。
次に改行の位置をコントロールするサンプルです。
cssは上記のものを流用します。
brタグを使う場合
こんにちは、今日は天気がいいですね。
お元気ですか？
私は元気です。
お元気ですか？
私は元気です。
<div class="demo_area demo_wb">
こんにちは、今日は天気がいいですね。<br>お元気ですか？<br>私は元気です。
</div>wbrタグを使う場合
こんにちは、今日は天気がいいですね。
<div class="demo_area demo_wb">
こんにちは、今日は天気がいいですね。<wbr />お元気ですか？<wbr />私は元気です。
</div>ポイントは二つ目のwbrタグです。
wbrは「横幅に余裕がなければここで改行する」という都合のよいタグです。
CSSのword-break: keep-all;と併用することで「基本的には改行しないが、wbrの部分で改行してもよい」という便利な解釈をしてくれます。
