[CSS] 특정 아이폰 사파리 브라우저 text-overflow:ellipsis 불가 현상

작업 중 발견 된 현상인데...

특정 아이폰 사파리 브라우저에서만 text-overflow:ellipsis 가 적용되지 않는 문제가 발생했다...

맥에다 아이폰을 연결해서 디버깅해봐도... 아니 대체 왜!!! 왜 특정 아이폰만 그러는지!!!

 

구글링 해본 결과 display 속성부터 position 속성까지 변경하는 방법들이 다양했는데

 

일단 내가 사용한 방법은 overflow:hidden 이 아닌 overflow:auto를 적용하는 것 이었다.

 

특이하게도 딱 overflow:auto로 값을 변경하니 text-overflow:ellipsis가 적용되었는데.... 아직도 원인은 모르겠다...

 

다만 작업중인 부분이 모바일 전용이고 해당 부분 위에 가상선택자로 투명한 박스를 올려놔서 사용자가 스와이프해도

 

해당 글 부분의 스크롤이 동작하지는 않는다.

 

.text_box {width:95%; white-space:nowrap; overflow:auto; text-overflow:ellipsis; scrollbar-width:none;}
.text_box::-webkit-scrollbar {display:none; -ms-overflow-style:none; scrollbar-width:none}

 

나중을 위해 기록해두기! (2024. 12. 17)