CSS3 멀티라인 말줄임 처리 및 폴백

CSS를 통한 멀티라인 말줄임 처리와 폴백(fallback)

<p>
    WebKit Browsers will clamp the number of lines
    in this paragraph to 2. Lorem ipsum dolor sit amet,
    consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim
    ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur
    sint occaecat cupidatat non proident, sunt in culpa qui
    officia deserunt mollit anim id est laborum.
</p>

p {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    border:1px solid red;
    margin:30px;
    font-size:20px;
    width:300px;
}

하지만 위와 같은 방법은 웹킷엔진을 사용하지 않는 브라우저에서는 해당 코드가 무시되기 때문에, 그런 상황을 대비한 폴백 처리를 해주어야 한다.

단순히 height 값을 넣어서 영역을 벗어난 글자를 잘라내주려고 하면 웹킷엔진을 사용하지 않는 브라우저에서는 폰트가 잘려져서 보여지는 문제가 발생합니다.

-webkit-line-clamp 값이 지정되어있어도, 그보다 큰 height값이 요소에 지정되어있다면 나머지 텍스트도 노출되어버리는 것이다.

이를 방지하기 위해 height 값을 적절히 줄여 사용할 수도 있지만, 모바일 환경에서는 단말의 종류에 따라 폰트도 달라지기 때문에 폰트의 크기를 확신 할 수 없다.

결국 어느 단말에서는 잘려보일 수 있는 위험이 남게 된다.

이를 방지하기 위해서는 line-height 값을 설정하고, 그에 비례하는 height 값을 주어야 합니다.

예를들어, line-height: 14px; -webkit-line-clamp: 3; 이라면 height 값은 14px와 3을 곱한 42px 값을 주어야한다.

line-height: 1.2em; -webkit-line-clamp: 2; 라면 height 값은 1.2em과 2를 곱한 2.4em을 주면 된다.