Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

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

sygnas
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away