[CSS] 두번째 줄에 ellipsis를 어떻게 적용시킬까?

오늘은 뉴스 기사 데이터를 받아와 해당 기사의 첫 두줄만큼만 미리 보기 텍스트로 표시하는 작업을 진행 중이었다. 

 

두 줄 만큼만 미리보기를 지원하는 이유는 저작권을 위반하지 않는 범위가 두 줄 이라고 한다. ㅇㅅㅇ;;

 

여하튼 속으로 '아니 그냥 ellipsis 사용하면 끝일 텐데?'하고 작업을 시작했는데, 

 

알고 보니 ellipsis 키워드는 한 줄에서만 동작하도록 되어 있는 키워드였다. 그래서 이것저것 고민해보면서 동료 개발자와도 논의를 해보니 '가능할 것 같은' 방안이 총 네 가지가 나왔다. 

 

1. -webkit-line-clamp 키워드 사용하기

   예상하는 장점: 많은 커뮤니티에서 해당 방법으로 문제를 해결했다.

   예상하는 단점: 웹킷을 사용하지 않는 브라우저에서는 동작하지 않을 것이다.

2. javascirpt를 이용해 프로그래밍적으로 해결

   예상하는 장점: 모든 브라우저에서 동작할 것이다. 

   예상하는 단점: 런타임이 늘어날 것이다.

3. pseudo css를 이용

   예상하는 장점: 대부분의 브라우저에서 동작할 것이다. 

   예상하는 단점: 가능여부가 확실치 않다.

4. 두 줄이 아닌 글자 갯수로 자르기

   예상하는 장점: 모든 브라우저에서 동작할 것이다. 

   예상하는 단점: 본래의 취지에서 벗어난다. 

 

위와 같이 고민을 하다가 3번을 선택해서 진행해 보기로 했다.

 

그리고 실패했다.. ㅋㅋㅋ

 

어지저찌 만들 수는 있었지만 원하는 모양이 아니어서 2번의 방식으로 진행을 해야겠다. 

 

일단은 3번 방식의 코드는 아래와 같다. 

 

<div className='company_news_ellipsis company_news_row'>
 	<span className='company_news_body'>
  		Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  		Mauris auctor nisi vitae massa facilisis, molestie rutrum 
        odio sollicitudin. Donec vitae orci sem. Praesent mauris 
        ligula, porttitor eget varius eu, sagittis vel odio. 
        Proin facilisis, mauris vulputate fringilla porta, ante 
        lorem dictum nibh, sit amet viverra velit sem eu massa.
    </span>
</div>

 

.company_news_ellipsis::after{
  content: '...';
}

 

결과

필자가 원했던건 mauris 바로 뒤에... 이 붙어 유저가 생략되었음을 알 수 있도록 하는 것이었는데, 위의 사진과 같이 바로 끝자락에 ... 을 붙이는 것에 실해했다. 

 

따라서 본래 의도로 구현하는것은 실패했다. 아마 pseudo 코드로 하는 방법이 있을 것이다(좌표 위치를 억지로 바꾸는 등). 하지만 생각해보니 만약 뉴스 기사에 첫 두 줄이 굉장히 짧아, 설정한 높이 이전에 두 문장이 끝나버린다면, 이는 세 번째 문장을 표시하게 될 것이고 법적인 문제가 될 수 있으니 위험한 구현 방식임을 뒤늦게 깨달았다. 

 

따라서 만일의 경우를 원천적으로 배제하기 위해 javascript를 통해 문장을 나누고 프로그래밍적으로 생략 표시를 넣는 것이 옳겠다고 생각된다.