a 태그의 텍스트가 길고, 모바일에서 레이아웃이 깨지는 문제를 경험했다면

이런 상황에 직면했다면

기본적으로 a 태그에 입력한 텍스트는 너무 길면 개행이 되어서 문제될 일은 없습니다. 다만, CSS Reset 등의 도구를 사용하여 CSS 설정을 초기화한 경우, 아래와 같이 개행이 되지 않고 레이아웃이 깨지는 문제가 발생할 수 있습니다.

이 문제를 개선할 수 있는 CSS 속성에 대해서 소개하고자 합니다.

 

 

참고로, 아래에서 언급하는 두 가지 방법은 모두 동일하게 동작합니다. word-break 가 표준이 아닌 당시에 처음 나왔던 방식이라면 그 후 표준화되어 통일한 명칭이 overflow-wrap 입니다. 즉, 이 두 방식은 동일한 기능을 수행합니다.

 

해결방법 1 | overflow-wrap : break-word or anywhere

a {
overflow-wrap: break-word | anywhere; /* 단어가 너무 길면 줄을 바꾸게 함 */ 
}

 

해결방법 2 |  word-break: break-all 

 a { word-break: break-all; }

 

적용 결과

문제가 발생하고 있는 태그에 overflow-wrap: break-word 를 적용하니 아까와 달리 개행이 된 것을 확인할 수 있습니다.

 

 

 

참고자료

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

overflow-wrap - CSS: Cascading Style Sheets | MDN