IPHONE(아이폰) 11/12 <span> 태그 텍스트 줄바꿈 이슈 현상

왜 바쁜건 한번에 몰아오는걸까.

​

앱에서 쿠폰 날짜가

예전에는 한줄로 잘 출력되던 코드가 갑자기 어느 날 두줄로

줄바꿈이 되서 출력되는 기이한 현상.

​

내용은 아래와 같다.

 

 

 

​

​

​

현상 : IOS 일부 디바이스(ipone 11/12) 에서 <span> 태그안에 있는 한줄 텍스트가 두줄의 줄바꿈 현상 보임

과정 : IOS span 태그가 block 요소로 인식하는 듯한 예상을함.

조치 : 해당 <span> 태그 속성을 width:100%; display:inline-block; 속성을 사용.

 

방법1.

span {
 display:inline-block;
 width:100%;
}

 

방법2.

span {
	display:inline-block;
	box-size:border-box;
}

 

 

결과: 성공!

 

​

끊임 없는 아이폰의 사파리 브라우저 & 아이폰 업데이트로 발생한 사이드 이펙트였다.

어느날 갑자기 사고처럼 오는 운영생활..

 

 

마무리

코드를 구현할때 여러 상황을 고려해서 방어적으로 코드를 작성해보면 어떨까. 

 

1. 부모에 상속 받도록 자식 엘레먼트 요소를 정확히 정의 해주기(display 속성)

2. 줄바꿈 없을 고정영역이라면 다양한 환경에 이펙트가 발생하지 않도록

    방어적으로 속성 부여해주기 

white-space: nowrap;

 

 

 

 

 

​