배경

돋보기 호버시 세부내용이 노출되는 기능을 구현하고 있었다.

현상

툴팁의 내용이 계속 줄바꿈되어 노출되었다.

시도

• .tooltip의 크기를 자식에 맞게 하려고 했다.
  position: absolute는 부모(position: relative)의 넓이를 따른다. 때문에 width: 100%를 하면 부모영역의 크기로 조절된다.

해결

그냥 줄바꿈을 하면 되는 문제였다. 계속 자식 객체의 넓이를 고정하려고 하거나 fit-content를 하는 등 이상한 삽질만 했다.

white-space: nowrap; 아주 소중한 친구이다. 줄바꿈을 막아주는 친구이다.

즐거운 삽질이였다. ദ്ദിˊᗜˋ)