텍스트 길이 넘칠때 ... 표시 해주기 (ellipsis, webkit)

요것두 스타일링에 관련된 거지만 매번 헷갈릴수 있기 때문에 정리해보겠다링 

 

블록을 넘어선 길이의 텍스트가 있을때 어떻게 처리해줄까. 물론 텍스트가 다 보일 때 까지 블록의 높이 혹은 너비를 조정할 수 있지만 본인이 짜둔 블록 디자인에 맞지 않게까지 커질 수 있다리. 

 

이 블록의 크기, 폰트 크기에 맞게 텍스트를 전부 나열해보면 위와 같이 6줄이 나오게 된다. 하지만 요거 너무 길엉~ 해서 4줄정도만 혹은 3줄 정도만 더 줄이고 싶을 때에는 

 

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;  // 요거 요거 중요
    -webkit-line-clamp: 4;  // 4줄을 맥스로 둘때, 숫자가 맥스 줄 크기당
    -webkit-box-orient: vertical // 요거 안해주면 스타일이 안먹는당 그냥 세트로 외우자

 

본인이 짜둔 블록에 이 속성들을 추가하면 된다리 

하면 ... 텍스트 조절 완료