[CSS] 여러 줄 텍스트. 보이는 줄 제한하기

multiline 제한하기

 

chrome같은 최신 브라우저에서 지원하는 css 문법.

하지만, IE에서는 지원하지 않음. 크로스 브라우징을 고려한다면, 다른 방법을 찾아야 함.

 

 

예로.. 3줄로만, 화면에 보여줘야 한다면,

다음과 같은 방법을 사용해서 문제를 해결함.

.multiline {
    white-space: normal;
    text-align: left;
    word-wrap: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    // IE 대응
    // line-height: 1.2rem;
    // max-height: 3.6rem;
}

 

 

IE 대응을 생각한다면,

.multiline {
    white-space: normal;
    text-align: left;
    word-wrap: break-word;
    overflow: hidden;
    //display: -webkit-box;
    //-webkit-line-clamp: 3;
    //-webkit-box-orient: vertical;
    // IE 대응
    line-height: 1.2rem;
    max-height: 3.6rem;
}

 

참고로, javascript를 사용해서 문자열 데이터를 잘라서 '...'를 붙이는 방식은 좋은 방법이 아니다. 그 이유는 브라우저 해상도 너비가 늘어나면, 대응할 수 없어지고, 혹여나, 무리하게 대응 코드를 작성하게 되는 참사가 발생하기 때문이다. css로 해결하는 방법이 최선인 것 같다.