[TIL] Tailwind CSS break-all (텍스트 줄바꿈 시 깨지는 현상 해결)

 

💡 TIL 20230907 - Tailwind CSS break-all (텍스트 줄바꿈 깨지는 현상)

---

<p>태그의 글씨가 정상적으로 줄바꿈 되지 않는 현상

현재 모바일 반응형 작업 중인데, 왼쪽 이미지처럼 숫자를 길게 쓰면 줄바꿈이 되지 않고 영역 밖을 튀어나가는 현상을 발견했다. (암흑요리왕님께 무한한 감사)

그리고 오른쪽 이미지의 경우 이미지가 있는 다른 컴포넌트들은 정상적으로 나오는데, 저 "새콤달콤 치커리 샐러드"만 사진이 튀어나가는 것이 아니겠는가.. (딥빡)

 

암튼 치커리 샐러드를 고치다가 원인을 잘 모르겠어서 헤매던 중, 암흑요리왕님의 댓글을 발견하고 좀 찾아보니 tailwind의 Word Break라는 유틸함수를 알게 되었다. 엘리먼트 내에서 문장 또는 문단의 단어 나누기를 제어하는 유틸리티이다.

 

진짜 테일윈드 공식문서 최고최고최고

너무나 친절한 공식문서 덕에 숫자가 Word Break 되지 않고 늘어지는 현상을 쉽게 고칠 수 있었다.

 

저 댓글 이슈를 고치고 나서 생각해보니.. 혹시.. 치커리 샐러드도 줄바꿈되는 부분에 쉼표나 띄어쓰기 같은 break 되지 않는 요소들이 있어서 저러는건 아닐까? 하는 합리적인 의심이 들었다. (아니 그도 그럴게 같은 컴포넌트를 map 돌리는 다른 게시글들은 전부 다 정상인데 쟤만 콕 튀어나오는게 너무나 이상했다.)

 

그래서 코드를 아래와 같이 수정했더니 바로 해결 되는 것을 확인할 수 있었다..!

 

// 수정 전
<Link href={`/community/${post.post_uid}`}>
  <p className="text-gray-500 text-sm cursor-pointer hover:underline text-ellipsis line-clamp-2">
    {removeHtmlTags(post.content)}
  </p>
</Link>

// 수정 후 - break-all 추가
<Link href={`/community/${post.post_uid}`}>
  <p className="text-gray-500 text-sm cursor-pointer hover:underline text-ellipsis line-clamp-2 break-all">
    {removeHtmlTags(post.content)}
  </p>
</Link>

 

<p>태그가 들어가있는 부분에서 이상하게 줄바꿈이 되지않고 글자가 튀어나온다 하면 Break Words를 참고할 것!

 

 

 

---

참고 사이트

Word Break - Taillwind CSS Doc