글자길때 ... ellipsis 만들기

broccoli·2021년 7월 15일
0

styles

목록 보기
4/4
post-thumbnail

방법1.

일반적으로 그냥 한줄짜리 ellipsis는 간단하다

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

이렇게 하면 된다.

방법2.

하지만 만약 여러줄의 긴 문장들의 몇번째 줄부터 ...을 주고 싶다면 아래와 같이 하면 된다.

word-break: break-all;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

-webkit-line-clamp가 몇번째에 ellipsis를 줄 것인지 판단해준다.

방법3.

특정 글자수에 따라 맞춰주고 싶을때는 substring(0,200) 같은 함수를 써서 자바스크립트에서 처리해줘도 된다.

profile
🌃브로콜리한 개발자🌟

0개의 댓글