iOS Safariでのみ英字のあとが改行されるのを解決する方法

2021/05/04

なぜだか、iOSのSafariのみ、英字のあとが不自然に改行されるバグがたびたび起こります。

Chromeではなってないのに、Safariだけです。これだからSafariは嫌い。

今回はそれを無理やり解決した方法を紹介したいと思います。

不自然に改行されたときの状況
結論：英字を擬似要素で表示させる
おわりに

不自然に改行されたときの状況

ぼくが実際に遭遇したケースはこれです。

font-sizeは14px
pタグを使用
文言は「TEL 000-0000-000」や「FAX 000-0000-0000」
英字と数字の間には半角スペース1個

TELのあとの半角スペースで勝手に改行されちゃって困った困った。

表示としてはこんな感じになってました。実にブサイク。

TEL
000-0000-0000

結論：英字を擬似要素で表示させる

「iOS Safari 改行される」でググってヒットした記事を参考に色々と試してはみたもののどれもうまくいかず。

結局諦めて、TELやFAXなどの改行の原因となっている英字をpタグの疑似要素beforeで表示させることで対応しました。

英字と他の文字と間はpadding-leftで調整しました。

ということで以下サンプルコード。

HTML

<p class="Text">000-0000-0000</p>

CSS

.Text{
  position: relative;
  padding-left: 32px;
  font-size: 14px;
}
.Text::before{
  content: 'TEL';
  display: block;
  position: absolute;
  left: 0;
  font-size: 14px;
}

おわりに

以上、iOS Safariでのみ英字のあとが改行されるのを解決する方法をご紹介しました！

今回紹介したのはあくまで一例です。他にも例えば、

spanタグで囲ってそれにmarginで半角スペースなどの余白を表現する
white-spaceプロパティをいじる
word-breakプロパティをいじる

など、様々な対処法があるみたいなのでご自身の環境に適した方法で対応してみましょう。

次はこの記事！

【CSS レスポンシブ】スマホとPCでテキストの改行の表示非表示を自由自在に変える方法

SVG画像のフォントが iOSで明朝体になってしまう現象を直す方法