Overflow : hidden 이 레이아웃을 부숴버릴때

Overflow : hidden 이 레이아웃을 부숴버릴때

overflow은 CSS에서 요소의 컨텐츠가 요소의 box를 벗어나는 경우 어떻게 처리할 지 지정한다. hidden 은 box를 벗어나는 부분을 숨긴다. 그러나 이 속성을 사용할 때 예상치 못한 레이아웃 문제가 발생하기도 한다.

text-overflow:ellipsis 와 overflow:hidden

나의 경우에는 ellipsis를 이용하여 ... 을 만들려는 상황에서 레이아웃이 망가졌다.

&-ellipsis {
      overflow-x: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
}

검색해보니 overflow : hidden이 레이아웃을 망칠때는 vertical-align : bottom 을 사용하라고 한다.

&-ellipsis {
      overflow-x: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      vertical-align : bottom; /* 추가 */
}

vertical-align을 추가해주니 레이아웃이 정상화되었다.

 

overflow:hidden이 레이아웃을 망칠때 해결책

overflow : hidden이 레이아웃을 망치면 vertical-align을 이용하자.

 

---

참고 https://stackoverflow.com/questions/20562787/overflow-hidden-breaks-layout