[CSS] css로 글자수 자르기 / 문자열 자르기

한 줄 글자 자르기

p{
 display: inline-block; 
 width: 200px; 
 white-space: nowrap; 
 overflow: hidden; 
 text-overflow: ellipsis;
 }

display : block 요소나 inline-block 요소 둘 다 사용 가능합니다.

white-space : nowrap은 줄바꿈 처리가 되지 않도록 합니다.

overflow:hidden은 넘치는 텍스트를 숨깁니다.

text-overflow : ellipsis 는 넘치는 텍스트를 숨긴 후 '...' 처리를 해줍니다.

 

한 줄 글자 자르기는 크롬, 익스 모두 잘린 후... 처리되어 보입니다.

 

두줄 / 여러줄 글자 자르기

p{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* 라인수 */
-webkit-box-orient: vertical;
word-wrap:break-word; 
line-height: 1.2em;
height: 3.6em; 
}

 

여러 줄을 자를 때는 -webkit-line-clamp: 에 라인수가 두줄일 경우 2, 세줄일 경우 3을 적어줍니다.

height값은 line-height의 배수를 적어주면 됩니다.

1.2rem일 경우 2줄 : 2.4em

1.rem일 경우 3줄 : 3.6em

 

익스(ie) 같은 경우에는 멀티라인 말줄임표가 되지 않기 때문에 자바스크립트나 제이쿼리로 글자 수로 말줄임을 사용하여야 합니다.