LoginSignup
4

More than 5 years have passed since last update.

posted at

iOS Safari で最後の一文字だけ改行される不具合の対処方法

特定条件のみ最後の一文字が改行されてしまう

iOS Safariでページを確認したら特定の箇所だけ最後の一文字が改行されてしまうという現象に悩まされていました。

スクリーンショット 2016-12-05 1.22.47.png

こんな感じです。

発生条件

≫iOSで最後の1文字が改行される
≫Mobile Safariで最後の1文字が改行されてしまうバグ

上記ページに発生条件がいろいろ書かれていますが、

  • フォントサイズ
  • 前後の空白
  • 文字数

などは自分の場合は関係ありませんでした。別の文字列にしても改行されたので文字コードなども関係ないようです。

  • dt タグを display:inline-block する

というのが自分の発生条件のようです。

対処法

dt{
    display: inline-block;
    margin-right: -1px;
    &:after{
        content: ".";
        width: 0;
        font-size: 0;
        color: transparent;
        margin-right: 1px;
    }
}

content を空白にすると効果がなかったので適当にピリオドを入れました。
font-size: 0; にして、 color: transparent; にすることで余計な余白も見た目も異物が表示されないようにしました。

スクリーンショット 2016-12-05 1.22.47.pngスクリーンショット 2016-12-05 1.23.16.png

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
4