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

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

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; にすることで余計な余白も見た目も異物が表示されないようにしました。

→