[css-real]: 한줄, 또는 여러줄의 말줄임(...) 처리 방법1

말줄임 표시를 할 영역은 블록 요소이거나, 인라인 요소의 경우 display:inline-block과 넓이값 지정이 필요하다.

 

1. 한줄일 때, 

민트라는 이름은 그리스 신화에 등장하는 님프 멘테(Menthe)에서 유래됐다. 식용 민트로 가장 널리 쓰이는 것은 페퍼민트와 스피어민트이다. 이외에도 화장품, 목욕제 등에 주로 쓰인다. 품종에 따라 향, 풍미, 잎의 색과 형태는 다양하다. 스피어민트(spearmint, Mentha spicata, Mentha viridis)는 박하속에 속하는 종의 하나로, 유럽과 아시아의 수많은 지역(중동, 히말라야, 중국 등)에 자생하며 아프리카 북서부, 북아메리카, 남아메리카, 다양한 해안섬의 일부 지역에서도 볼 수 있다. 치약에도 사용하고 담배 냄새를 없애는 향유의 원료로도 사용된다. 방향제나 방충제로도 사용된다.

.ellipsis {
    text-overflow: ellipsis;
    white-space:nowrap;
    overflow:hidden;
}

2. 2줄 이상일 때,

민트라는 이름은 그리스 신화에 등장하는 님프 멘테(Menthe)에서 유래됐다. 식용 민트로 가장 널리 쓰이는 것은 페퍼민트와 스피어민트이다. 이외에도 화장품, 목욕제 등에 주로 쓰인다. 품종에 따라 향, 풍미, 잎의 색과 형태는 다양하다. 스피어민트(spearmint, Mentha spicata, Mentha viridis)는 박하속에 속하는 종의 하나로, 유럽과 아시아의 수많은 지역(중동, 히말라야, 중국 등)에 자생하며 아프리카 북서부, 북아메리카, 남아메리카, 다양한 해안섬의 일부 지역에서도 볼 수 있다. 치약에도 사용하고 담배 냄새를 없애는 향유의 원료로도 사용된다. 방향제나 방충제로도 사용된다.

.ellipsis-box {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    text-overflow: ellipsis;
    overflow: hidden;
    
    /* ★★ 설정이 필요한 영역 ★★ */
    /* ★★ 3줄 이상은 말줄임 처리 ★★ */
    -webkit-line-clamp: 3;
    
    /* ★★ line-height:20px일때 ★★ */
    height: 60px; /* ★★ line-height * 3 ★★ */
}

브라우저마다 말줄임표시는 다르며, 우리의 못난이, 익스플로러는 말줄임표시 없이 숨김 처리가 된다.

 

이에 글이 잘려보인다는 항의가 들어오면... 미친 척하고 '그건 익스플로러에 문의주시겠습니까?'라고 하거나, '줄'이 아닌 '글자수' 제한을 제안할 수 밖에 없다. 글자수 제한의 경우, 위의 css는 지우고, 스크립트로 작성한다.

 

언젠가, 항의가 아니라 문의가 오길 바라며 글을 마친다.