css 말줄임효과 붙이기

보통 최신게시물 보기 코딩시에

텍스트가 공간을 넘어가게 들어올경우 잘라주고 말줄임표시를 해주는 방법

.reduced {
    text-overflow:ellipsis;
    white-space:nowrap;
    word-wrap:normal;
    width:100px;
    overflow:hidden;
}

▷ text-overflow : 글자가 지정한 공간을 넘어갈경우 처리하는 방식을 설정해줄수 있다.

clip : 기본값

ellipsis : 말줄임표로 처리 / 부모요소의 너비가 auto일 경우 적용할수 없다.

ingerit : 부모요소와 동일

▷ white-space : 줄바꿈, 들여쓰기, 공백처리 방식을 선택할수 있다.

normal : 기본값 공백이 여러개여도 1개로 처리한다.

nowrap : 공백이 여러개여도 1개로 처리한다. 텍스트가 넘어가더라도 1줄로표시한다.

pre : 공백을 있는 그대로 표시한다. 줄바꿈이 없으면 줄바꿈하지 않는다.

pre-wrap : 공백을 코드에 있는 그대로 표시한다. 코드에 줄바꿈이 없어도 자동으로 줄바꿈 실행한다.

pre-line : 공백을 여러개 넣어조 1개로 처리한다. 코드에 줄바꿈이 없어도 자동으로 줄바꿈을 실행한다.

▷ word-wrap : 긴 텍스트를 강제로 끊어서 줄바꿈 해주는 속성이다. (overflow와 비슷하다)

normal : 기본값 글자가 길어도 끊어지지 않고 한줄에 표시

break-word : 강제로 끊어서 줄바꿈한다.

두줄이상 텍스트 말줄임효과

.reduced {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 라인수 */
-webkit-box-orient: vertical;
word-wrap:break-word; 
line-height: 1.2em;
height: 3.6em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 2 = 2.4em */
}
 

-webkit-line-clamp : 웹킷 엔진 사용하는 브라우저만 사용가능하다.