【CSS】Appleのサイトみたいに単語の途中での改行を禁止する

みなさんAppleのサイト好きですか？好きですよね？
Appleのサイトを見たことがある方ならご存知だと思いますがAppleのサイトでは「りんご」などの単語での途中で改行が発生しないようになっています。そこで今回はAppleのサイトではどのように単語ごとに区切っているのか調べたので紹介していきます。

どうやっているのか

単語ごとにspan要素で区切り、それぞれのspan要素に改行を禁止するwhite-space: nowrap;を適用しています。

実際にやってみる

実際に「Appleのサイトみたいに単語の途中での改行を禁止する」の単語の途中での改行を禁止します。TailwindCSSを使用して、

<p>
  <span class="whitespace-nowrap">Apple</span>
  <span class="whitespace-nowrap">の</span>
  <span class="whitespace-nowrap">サイト</span>
  <span class="whitespace-nowrap">みたい</span>
  <span class="whitespace-nowrap">に</span>
  <span class="whitespace-nowrap">単語</span>
  <span class="whitespace-nowrap">の</span>
  <span class="whitespace-nowrap">途中</span>
  <span class="whitespace-nowrap">での</span>
  <span class="whitespace-nowrap">改行</span>
  <span class="whitespace-nowrap">を</span>
  <span class="whitespace-nowrap">禁止</span>
  <span class="whitespace-nowrap">する</span>
</p>

とすれば文章が改行で変になりません！
ぜひ参考にして見てください！！