멀티라인 말줄임과 폴백(fallback) CSS

 

css상으로 만드는 말줄임표는 한줄까진 다양한 브라우저에서 사용가능하나,

멀티라인, 즉 두줄 이상의 글에서는 사용할 수가 없다.

그러나, webkit 엔진을 쓰는 브라우저(크롬, 모바일 사파리 등)는 멀티라인 말줄임이 가능하다.

 

display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; 
overflow:hidden; text-overflow:ellipsis; 
// 2줄 이상이 될때 말줄임표 등장.

 

여기서 문제는 모바일에선 큰 문제가 없을 듯 하나,

pc 크로스브라우징의 경우 어찌해야하나 이다. 그럴경우 상호간 합의(기획과 퍼블..?)에 의해

2줄이상에서 보여지지 않는정도로 합의를 본다면 아래 폴백 css로 대체할 수 있다.

 

height:40px; line-hegiht:20px;

 

여기서 중요한 것은, line-height 값을 준다는 것.

브라우저마다 폰트의 렌더링이 다르기 때문에 height값만을 주는 경우 달리 보여질 수 있으니

이를 방지하기 위해 동일한 line-hegiht값을 줘서 그에 해당하는 줄 수를 곱해버리는 거다. (line-height값 * 줄값)

​

이러면 비록 webkit 엔진의 브라우저가 아니더라도 임의의 줄 이상에선 텍스트가 보이지 않게 된다는 것.

그러나 ... 을 원한다면 개발에서 임의로 텍스트를 잘라주던가, js로 하여금 만들어주는 수 밖에 없다.

이 역시 기획단에서 몇 텍스트까지 자를 것 일까를 정해줘야하는 부분이니 커뮤니케이션이 필요 할 것으로 보인다.

 

 

 

 

 

 

 

 

*댓글과 좋아요는 힘이 됩니다.