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

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

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

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

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

• display: inline-block;を指定している
• font-feature-settings: "palt"を指定している
• 文字列が全て全角文字
• 前後に空白がある（コード上の空白も含め）

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

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

1. 文章の最後に文字を入れて透明にする
2. white-space: nowrap;で改行できないようにする
3. フォントサイズを微妙に変える（やりたくない）

ボタンラベルなどの短い文章であれば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をいじりながら表示を確認できます。

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

Webrandum

iOSシミュレーターを使ってWebサイトを開発者ツールを見ながら実機表示で開発する方法

https://webrandum.net/ios-simulator

最近Web制作をしていると、iPhone5で表示した時にWebページに謎の縦線が入っていました。「何がおかしいんだろう？」と思ってChromeの開発者ツールでiPhone5の表示に切り替えたのですが、そのおかしな表示が再現されない...僕はWeb制作を行う際にいつもChromeの開発者ツールを使っていたのですが、どうやらChromeの開発者ツールは完璧にスマホデバイスを再現してくれるわけではないので、ある程度の表示はしてくれるものの本当に細かい微細な部分までは再現してくれないみたいです。だからこそ実機テストが重要とされてるわけです。実...