`-webkit-line-clamp` issue in Chrome browser

[JaeYeopHan]

Description

p 태그에서 말줄임을 적용할 때 다음과 같은 속성을 지정할 수 있다.

p {
  line-height: 1.7rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

이 경우, p 태그 내에 값이 없는 상태였다가 동적으로 text가 추가될 때, 이슈가 발생한다. Webkit 기반의 브라우저에서는 문제가 없지만 Chrome에서는 height css property가 없으면 말줄임이 제대로 적용되지 않는다.

그래서 height 값을 꼭 지정해줘야 한다.

[JaeYeopHan]

height 값은 -webkit-line-clamp * line-height 값으로 지정해주면 된다.