본문 바로가기
웹 관련 기록/HTML,CSS

2줄 이상 여러줄 말줄임 처리시, 맨 아래 글자 짤림 현상 해결

by Planetis 2021. 3. 25.

여러줄 말줄임 처리시 아래와 비슷한 스타일 많이 사용함

.두줄이상말줄임 {
  max-height:70px;
  overflow:hidden;
  text-overflow:ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

위 코드의 overflow:hidden 으로 인해서 글자 Qpyjg 잘림 현상이 나타났음.

padding-bottom 값 추가

{
  padding-bottom: 0.14em
}

padding-bottom 추가 했는데도 마지막 줄 글자가 짤린다면 max-height 조절이 추가로 되어야 함.

320x100

댓글