메시지를 한 줄에 나타나도록 설정 (자동 줄바꿈 안하기)

✅ Tooltip 메시지를 한 줄에 나타나도록 설정

목표:

• 현재 Tooltip의 메시지가 길어지면 여러 줄로 줄바꿈될 수 있는데, 이를 방지하여 한 줄로만 표시되도록 합니다.
• TailwindCSS 유틸리티 클래스를 사용하여 텍스트가 한 줄로 유지되고 **넘치는 텍스트는 말줄임표(...)**로 표시됩니다.

 

 

수정 전 코드

<div className="absolute left-1/2 -translate-x-1/2 mt-2 px-3 py-1 text-xs font-medium text-white bg-gray-800 rounded shadow-lg transition-opacity duration-300 opacity-100">
    {message}
</div>

 

 

 

🔑 변경된 부분 요약

1. whitespace-nowrap: 텍스트가 줄바꿈되지 않고 한 줄로만 표시됩니다.
2. overflow-hidden: 내용이 넘칠 경우 숨기도록 설정합니다.
3. overflow-ellipsis: 넘치는 텍스트는 말줄임표(...)로 표시됩니다.

 

 

수정 후 코드

<div className="absolute left-1/2 -translate-x-1/2 mt-2 px-3 py-1 text-xs font-medium text-white bg-gray-800 rounded shadow-lg transition-opacity duration-300 opacity-100 z-10 whitespace-nowrap overflow-hidden overflow-ellipsis">
    {message}
</div>