Web/CSS

[HTML,CSS] 텍스트 CSS 말줄임 처리하기

eunyoe 2023. 3. 13. 10:55
반응형

안녕하세요. 이번 포스팅은 css을 사용해 텍스트가 넘칠때 ...로 말줄임 처리하는 방법에 대해 알아보도록 하겠습니다.

 

한 줄 말줄임 처리하기

div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}

 

 

여러줄 말줄임 처리하기

 {
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
반응형
Please Enable JavaScript!
Mohon Aktifkan Javascript![ Enable JavaScript ]