회사에서 모바일 안내장을 만드는데 이걸 서버를 통해 특정파일로 변환 저장을 하면 table이 튀어나가는 현상을 발견했다..
크롬, 파이어폭스, 오페라, 엣지, 웨일을 확인했는데 문제가 없었다..
심지어 문제 덩어리인 IE조차도 튀어나가는 현상은 없었다..
그런데 '사파리'가 문제였다..
테이블이 문제인가 싶어서 크기를 조정해보기도 하고 텍스트 사이 패딩과 마진을 수정해보기도 했다.. 그래도 결과는 변함이 없었다..
그런데 텍스트를 읽다보니 튀어나가는 부분에 있는 텍스트들이 유독 길었다. 텍스트들이 크기에맞춰서 떨어지다가 특정 해상도부터 텍스트가 떨어지지않고 유지가 되었던 것이다.
그래서 테이블이 튀어나간 것처럼 보였던 것..
텍스트 관련 css를 모조리 건드려보았고 결국 찾아냈다.
word-break가 문제였다.
word-break: keep-all;
이녀석이 테이블이 더이상 작아지지않게 붙잡고 있던 거였다.
이걸 수정한 후 위에서 확인한 브라우저들로 모두 다 확인을 했고 모두 정상 작동하는걸 확인했다.
