特定条件のみ最後の一文字が改行されてしまう
iOS Safariでページを確認したら特定の箇所だけ最後の一文字が改行されてしまうという現象に悩まされていました。
こんな感じです。
発生条件
≫iOSで最後の1文字が改行される
≫Mobile Safariで最後の１文字が改行されてしまうバグ
上記ページに発生条件がいろいろ書かれていますが、
- フォントサイズ
- 前後の空白
- 文字数
などは自分の場合は関係ありませんでした。別の文字列にしても改行されたので文字コードなども関係ないようです。
-
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; にすることで余計な余白も見た目も異物が表示されないようにしました。
→ 