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

2020年11月20日

最近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をいじりながら表示を確認できます。

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

1997年生まれ。2016年から専門学校でデザインを学び、卒業後は神戸の制作会社でWeb制作に従事しています。Webrandumは2016年から運営し、ウェブデザイン、フロントエンド開発、WordPress、CSS、JavaScript、制作環境の効率化を中心に、実際に試した内容を執筆しています。

カテゴリー

タグ

文章量

短文普通長文