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

URL: https://webrandum.net/ios-safari-last-character-new-line/
公開日: 2020-11-20
更新日: 2020-11-20
カテゴリー: コーディング
タグ: iOS, Safari
出典: Webrandum（著者: サイトウ マサカズ）

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

詳細な使い方は過去に記事にしているので、[そちら](https://webrandum.net/ios-simulator/)をご覧ください。

[iOSシミュレーターを使ってWebサイトを開発者ツールを見ながら実機表示で開発する方法](https://webrandum.net/ios-simulator)