특정 조건 만 마지막 문자가 개행됩니다.

iOS Safari에서 페이지를 확인하면 특정 부분만 마지막 한 문자가 개행되어 버린다는 현상에 시달렸습니다.



이런 느낌입니다.

발생 조건

≫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; 로 하는 것으로 불필요한 여백도 외형도 이물이 표시되지 않게 했습니다.

→