iOS Safariで文章の最後の1文字だけ改行されてしまう現象の対処法

最近iOS Safariで起きた現象とその対処法についてまとめておきます。

ブラウザ表示のトラブルといえばIEでばかり起きるもののイメージがあったのですが、最近意外とSafariで見たときに「あれ？」となることが増えてきました。

文章の最後の1文字だけ改行されてしまう

横幅が足りなくて改行されているのではなく、明らかに横幅は余裕があるのに、最後の1文字だけが改行されてしまいました。
原因としては下記のようなことがあるみたいなのですが、自分の場合はdisplay: inline-block;でフォントサイズを14pxで文字数が全角13文字のときに発生しました。

しかも、iPhone長押しでテキストの選択をすると1行で選択されるので、あくまで要素としては1行になっていて、最後の1文字だけ改行された位置に表示されているような気持ち悪い現象です。

現時点で取れる対処法は下記のどれかです。

ボタンラベルなどの短い文章であればwhite-spaceがラクですが、文章の場合は空白を入れる必要がありそうです。

疑似要素を使って、文章の最後に文字を入れ、それを透明にしてあげます。

.paragraph::after {
  content: '.'; // 文字を設定
  display: inline-block;
  width: 0;
  color: transparent;
  pointer-events: none;
}

pointer-events: none;を付けておけば、選択もできなくなります。
これで最後の文字である「.」が改行されたとしても、透明なので見た目は何も変わらないようになります。

white-space: nowrap;を使えば、改行できないようになります。
この指定をしておけば、1行に揃ってくれました。

.btn {
  white-space: nowrap;
}

この現象は実機でないと確認できないので、修正 → 実機で確認を繰り返さないといけないのは少し面倒です。

そこで、MacユーザーであればiOSシミュレーターを使うのがオススメです。
iOSシミュレーターを使えば、開発者ツールで実際にCSSをいじりながら表示を確認できます。

詳細な使い方は過去に記事にしているので、そちらをご覧ください。