<span>태그 줄바뀜 현상
오늘은 span태그 모바일 줄바뀜 현상을 해결하는 방법을 소개하려고 합니다.
저는 어포스트에서 무료로 배포하는 티스토리 스킨을 사용하고 있습니다. 티스토리의 장점 중 하나는 HTML과 CSS를 사용할 수 있는 분들은 자신의 스타일에 맞게 수정이 가능하는 점이죠!
네이버는 세부 수정이 가능하긴 하지만 수정이 안되는 부분도 있기 때문에 티스토리를 좀 더 선호하는 편입니다. 하지만 수정을 하다보면 남이 작성한 코드이다보니 찾기 어려운 부분도 있고 적용이 잘 안되는 부분도 있더라구요.
지금은 눈에 보이는 족족 스킨을 수정하고 있는데요. 제 블로그 모바일 페이지에서 게시글 작성 날짜를 표시해주는<span>태그가 자꾸 줄바뀜되는 현상이 있었습니다.
스킨은 반응형이고 데스크탑 해상도에서는 멀쩡하지만 모바일 환경에서는 내려갑니다. 데스크탑에서 모바일 해상도에서는 문제가 없지만 제 아이폰으로 보았을때 줄바뀜현상이 나타납니다.
※ 해결방법 ※
white-space: nowrap;
해당 <span>태그 CSS속성에 아래와 같이 넣어주면 말끔히 해결됩니다.
white-space속성은 요소 내부의 공백처리 방법을 선언합니다.
👇 자세히 알아보기 👇
white-space
The white-space CSS property sets how white space inside an element is handled.
developer.mozilla.org
- white-space: nowrap 적용 후 -
적용 후 줄바뀜 현상이 사라졌습니다. 문제해결!