akira_youの私見: webでも単語をぶつ切りせず改行したい。

2016年9月15日木曜日

改行を間違うと悲しい

webサイトでよくあるのが、妙な所で改行が入ること。例えば以下の様に、変な所で改行が入ると悲しい。これは過去にあった実例。

「リチャード・クレイダーマンコ

ンテスト」

伝統あるピアノコンテストが台無しだ。

そこでinline-blockを指定した<span>タグで切られたくない単語を囲むと良いよというネタを見かけたのだが。なんか行末がガタガタして格好悪い。このガタガタを直すCSSがtext-align: justify;なのだが、inline-blockでぶつ切りにしてるので効かない。

いくつか試した結果inline-blockではなく、white-space: nowrapを指定した<span>タグで囲めばうまく行くのに気が付いたので、試した。実際にはchrome/IEが<span>タグの連続は改行なしというルールがあるので、<wbr>タグを挟んでいる。

(Firefox,IE11,chrome,safariでは確認したが、iPhone等では未確認）

雑誌で見るような流し込み結果になった。これで一安心だが、全部の区切りを手入力すると大変なので、Tingy-segmenterという分かち書きjsをつかって、自動で区切りを判定できるようにした。

ソースをコピペして、文章を適当に<p>や<div>で囲んでclassに「jas」を追加するだけでよい。ちなみに、ニーズがあるか不明だが<button>に長い文章を入れたい時も有効に使える。