Text-overflow 2줄 말줄임표 사용법 {css 코드 공부하기}

안녕, 이번시간은 Text-overflow 속성을 알아보려해. 지난 시간에  White-space에 관해 공부를 했잖아?  {White-space : nowrap;} css코드가 적용된 긴 텍스트에 적용할 수 있는 코드야. 일반 적인 사이트에 제목이나 긴 텍스트에 …으로 말줄임표를 볼 수 있다. 그 기능을 CSS코드로 설정하는 방법을 알아보자. 

Text-overflow의 속성에는 clip, ellipsis가 있다. 
clip은 디폴트 상태로 잘라서 보여준다는 의미이고, 
ellipsis가 말줄임표로 사용되는 속성이다. 아래 예제를 살펴보자.

text-overflow에 기본 조건은 지난 시간에 배운 white-space : nowrap; 과 overflow: hidden; 충족되어야한다.

See the Pen BajBPNa by lee kwang jae (@estyless) on CodePen.

Codepen의 Css 버튼을 누르면 Css 코드를 볼 수 있습니다.

Html Class .title01에 적용된 항목이 {text-overflow: ellipsis;}로
긴 한줄의 텍스트가 말줌임표로 마무리 되는것을 볼 수 있다. 

Class .tilte02에 적용된 항목이 {text-overflow:clip;}으로 기본 상태이다.
코드 초기화에 사용된다. 코드를 사용안해도 clip상태.

Class .title03에 적용된 항목이 text-overflow: ellipsis;를 2줄 이상에서 사용하는 방법이다. 

.class{white-space: normal; 
 display: -webkit-box; 
 -webkit-line-clamp: 2;/*줄 선택*/
 -webkit-box-orient: vertical; }

말줄임표를 사용을 숙지하여 사용하면 사용자에게 더 친화적인 UX로 다가갈 수 있다.