ELLの足跡

人は最後は一人だという…でも、…今は妻が傍にいてくれる…

見出しなどで単語の途中で改行させない方法

日本語を表示する時、下のように単語の途中で改行されてしまう場合がありますよね・・・

午後5時よりタイムサービス
本日のお買得情報は

この様な場合、あなたは如何してますか?

ここからここまでが単語ですよとコンピュータに指示を出せば良い訳ですよね・・・

では説明して行きますね・・・


  1. 結論、white-spaceを使用します・・・
    ※ 空白やタブ・改行の処理をどうするかを指定できます

  2. スタイルシートで・・・style="white-space:nowrap;"と記述します。
    ※ これで自動で改行しなく成ります。

  3. これを<SPAN>の中に記述します・・・
    ※ <span>~</span>で囲んだ範囲を単語と見なしてもらう訳です
    <SPAN style="white-space:nowrap">午後5時</SPAN>より
    <SPAN style="white-space:nowrap">タイムサービス</SPAN>
    <SPAN style="white-space:nowrap">本日</SPAN>の
    <SPAN style="white-space:nowrap">お買得情報</SPAN>は

  4. これで自動改行はされません

  5. 結果、下のように表示されました。
    午後5時よりタイムサービス
    本日お買得情報




今日の小技は如何でしたか?