はじめに
最近スマホページの作成をしたのですが、画面幅を変えて表示していると、画面幅が狭くなるとどうしても数字で表記していた部分が途中で改行されてしまう事態に陥りました。だからと言って文字サイズを小さくするわけにもいかず。最終的に、画面幅が狭い場合は数字表記部分をまとめて改行して表示することになったのですが、そんなこと出来る設定なんてあるんですか！？と思ったので備忘録まで。
実はめっちゃ簡単だった！！
「spanタグを使えば出来るよ」と、ほぼ答えを教えてもらって調べてみたら、spanタグに対してcssで「display: inline-block」を指定してあげるだけでした。簡単すぎる！さすがspanタグ！！
下記のHTMLを起動し、画面の横幅を狭くしたり広げたりすると「なにぬねの」の部分だけはまとめて改行されることが確認出来ると思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Sample</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<p><span>あいうえおかきくけこさしすせそたちつてと<span>なにぬねの</span>はひふへほまみむめも</p>
</body>
</html>
p {font-size: 35px;}
span {display: inline-block;}
まとめ
spanタグは分かりやすくて便利なタグだな～と思っていましたが、もっと便利なタグという印象に変わりました。これで使い方をまた1つ覚えました！！ちょっと賢くなった気分。笑