CSS로 한줄, 여러줄 글 길어지면 말줄임("...") 표시하기

CSS로 한줄, 여러줄 글 길어지면 말줄임("...") 표시하기

---

웹사이트 제작시 필수로 사용되는 말줄임표시, 보통 한줄 말줄임표시만 CSS에서 처리하고 그 외 여러줄 말줄임 표시는 개발자에게 맡기거나 하는편이다. 이 포스팅에서 CSS가지고 한줄, 여러줄 말줄임표시(CSS3)를 구현하는 방법과 CSS3속성이 지원되지 않는 하위 브라우저에서는 어떻게 대응해야하는지 알아보려고 한다.

---

먼저 아래와 같이 HTML과 CSS 코드를 작성한다. 쉽게 볼 수 있는 최신 글 목록 UI이다.

<!-- HTML -->
<div class="news">
    <h2 class="title">뉴스목록</h2>
    <ul>
        <li><a href="javascript:;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil in vero, deleniti fugiat laudantium maiores corrupti, dolor ea, quae ad maxime inventore consequuntur? Eaque voluptatem neque, at dignissimos corrupti vitae?</a></li>
        <li><a href="javascript:;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil in vero, deleniti fugiat laudantium maiores corrupti, dolor ea, quae ad maxime inventore consequuntur? Eaque voluptatem neque, at dignissimos corrupti vitae?</a></li>
        <li><a href="javascript:;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil in vero, deleniti fugiat laudantium maiores corrupti, dolor ea, quae ad maxime inventore consequuntur? Eaque voluptatem neque, at dignissimos corrupti vitae?</a></li>
        <li><a href="javascript:;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil in vero, deleniti fugiat laudantium maiores corrupti, dolor ea, quae ad maxime inventore consequuntur? Eaque voluptatem neque, at dignissimos corrupti vitae?</a></li>
    </ul>
</div>

/* CSS */
.news {padding:40px; width:400px;}
.news .title {margin-bottom:10px; padding-bottom:8px; font-size:18px; border-bottom:2px solid #999;}
.news ul li + li {margin-top:8px;}
.news ul li a {color:#444; font-size:13px; text-decoration:none;}
.news ul li a:hover {text-decoration:underline;}

최신 글 목록 UI

보통 최신 글 목록에서는 제목을 한줄로 처리하니 말줄임표시를 위해 li 에 아래와같이 스타일을 추가한다.

/* CSS */
.news ul li {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

최신 글 목록 UI 한줄 말줄임 표시

이제 한줄 말줄임표시가 정상적으로 적용된걸 볼 수 있다. 아래 코드는 한줄 말줄임 표시 예제 최종 CSS 코드이다.

/* CSS : 한줄 말줄임표시 최종 코드 */
.news {padding:40px; width:400px;}
.news .title {margin-bottom:10px; padding-bottom:8px; font-size:18px; border-bottom:2px solid #999;}
.news ul li {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.news ul li + li {margin-top:8px;}
.news ul li a {color:#444; font-size:13px; text-decoration:none;}
.news ul li a:hover {text-decoration:underline;}

---

그럼 같은 HTML을 가지고 디자인을 변경하여 여러줄 말줄임표시를 적용해보자. HTML은 위에서 사용된 것과 동일하고 아래와 같이 CSS만 수정하였다. (하위 브라우저 지원을 위해 flex-layout 속성은 사용하지 않았다)

/* CSS */
.news {padding:40px; width:500px;}
.news .title {margin-bottom:10px; padding-bottom:8px; font-size:18px; border-bottom:2px solid #999;}
.news ul {zoom:1;}
.news ul:after {display:block; content:""; clear:both;}
.news ul li {float:left; margin-bottom:14px; padding:15px; width:48%; border:1px solid #999; box-sizing:border-box;}
.news ul li:nth-child(2n) {float:right;}
.news ul li a {display:block; padding:15px; line-height:18px; color:#444; font-size:13px; text-decoration:none;}

좌우로 정렬된 BOX UI

위 UI에서 글의 제목을 전부 노출하는 것이 아닌 4줄 이상은 말줄임표시 ("...") 처리해보자. li의 a태그에 아래와 같이 속성을 추가한다.

/* CSS */
/*
    여러줄 말줄임을 위해 추가된 속성, 값
    display:-webkit-box; 
    word-wrap:break-word; 
    -webkit-line-clamp:3; 
    -webkit-box-orient:vertical; 
    overflow:hidden; 
    text-overflow:ellipsis;
    height:54px;
*/
.news ul li a {display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; line-height:18px; height:54px; color:#444; font-size:13px; text-decoration:none;}

-webkit-line-clamp속성값이 말줄임할 줄(line) 수이다. 주의점은 위 속성은 웹킷엔진을 사용하지 않는 브라우저에서는 정상적으로 노출이 안되기때문에 height값을 줘야하는데 위 예제에서는 3줄 이상 말줄임처리기 때문에 line-height값인 18px의 3배인 54px을 height값으로 주었다.

3줄 말줄임 표시가 정상 반영된 모습

정상적으로 3줄이상 말줄임표시 적용되었다. 아래 코드는 한줄 말줄임 표시 예제 최종 CSS 코드이다.

/* CSS : 여러줄 말줄임표시 최종 CSS */
.news {padding:40px; width:500px;}
.news .title {margin-bottom:10px; padding-bottom:8px; font-size:18px; border-bottom:2px solid #999;}
.news ul {zoom:1;}
.news ul:after {display:block; content:""; clear:both;}
.news ul li {float:left; margin-bottom:14px; padding:15px; width:48%; border:1px solid #999; box-sizing:border-box;}
.news ul li:nth-child(2n) {float:right;}
.news ul li a {display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; height:54px; line-height:18px; color:#444; font-size:13px; text-decoration:none;}

---

근데 위에서 작성된 여러줄 말줄임표시 코드는 아쉽게도 인터넷익스플로러(이하 IE)에서는 작동되지 않는다.

IE에서는 말줄임표시가 적용되지 않는다.

그럼 어떻게 해야할까? 아쉽지만 IE에서는 "..." 처리는 되지 않는다. 하지만 위에 적용했던 것처럼 line-height 속성 값의 숨기고 싶은 배수만큼 height를 주면 자연스럽게 숨김처리된다. 예를 들어 line-height값이 18px이고 3줄이상 숨김처리 하고싶다면 height값을 54px로 준다. IE에서 확인한 결과는 아래와 같다.

IE에서는 "..." 표시는 되지 않지만 3줄이상은 숨김처리된다.

IE 싫다.

---

2020/02/05 - [CSS] - 유튜브(Youtube) 영상 비율에 맞게 (반응형 사이즈)로 가져오기

유튜브(Youtube) 영상 비율에 맞게 (반응형 사이즈)로 가져오기

2019/09/19 - [JavaScript] - lozyload, 미디어 콘텐츠 지연로딩 시키기 (feat. jQuery Lazy)

lozyload, 미디어 콘텐츠 지연로딩 시키기 (feat. jQuery Lazy)

2019/08/30 - [CSS] - CSS 구글 스타일가이드 자세히보기 #intro

CSS 구글 스타일가이드 자세히보기 #intro