css 말줄임 적용하기

요즘 글 내용을 보여줄때 말줄임을 붙여서 예쁘게 보여달라는 요구가 많다.

그런데 이걸 스크립트로 조절하자니 너무 느리고 css 로 조절하려니 딱 내 맘에 드는게 없다. -_-;

지금까지 본 것 중에서 그나마 쓸만한 걸 기억해 놓자.

- 한줄짜리 말줄임

 이건 간단하다. 그리고 대부분 알고 있다. css 만 적용해주면 된다. 요거 참 좋다.

text-overflow:ellipsis;white-space:nowrap;word-wrap:normal

이걸 적용해도 안될때는 width 값을 추가적으로 적용할 것.

- 여러줄 말줄임

 이거 너무 골치 아프다 ㅜㅜ

그나마 webkit 브라우저에서는 css 만으로 예쁘게 적용이 되는데... 나머지가 문제다.

-- webkit 브라우저 대응

max-height:54px;display:block;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis

max-height 는 써보니 꽤 좋아서 계속 쓰게 됨(비 webkit 브라우저에서 height를 필요로 하는 경우가 있어서 사용함 -_-). 물론 없어도 된다.

-webkit-line-clamp 속성값으로 원하는 줄수를 넣기만 하면 된다.

너란 녀석 참 좋다 ㅜㅜ

비 webkit 브라우저에서도 이런거 좀 있으면 얼마나 좋아 ㅜㅜ

-- 비 webkit 브라우저 대응(파폭, 오페라)

말줄임 되는게 어디야... 그런데 치명적인 단점이 있으니...

height 값을 정해야 한다. (webkit 대응 css 에 max-height를 넣으것도 이것때문이다

그래서 두줄 말줄임으로 처리해 놨는데 출력되는 글이 한줄짜리면

대락 난감한 모양이 된다.

바로 이렇게... 대체 어디에 붙어있는거니;;

말줄임.. 너란 녀석 ㅜ

그래서 상황을 잘 봐가면서 써야 한다.

1. 말줄임하려는 태그 주위로 블럭 태그를 추가해야함.

<div class="ellipsis">

<div>

<p>말줄임하자!</p><!--원래 있던 태그-->

</div>

</div>

그리고 맨 바깥쪽에 원하는 클래스 이름 붙이기. 나는 ellipsis 라고 붙임.

2. css 추가

.ellipsis {overflow:hidden}

.ellipsis:before {content:"";float:left;width:1px}

.ellipsis > *:first-child {float:right;width:100%;margin-left:-1px}

.ellipsis:after {content:"\02026";float:right;position:relative;top:21px;left:100%;width:2em;margin-left:-2em;text-align:right;color:#777777;

box-sizing:content-box;

-webkit-box-sizing:content-box;

-moz-box-sizing:content-box;

background:-webkit-gradient(linear, left top, right top,from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));

background:-moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);

background:-o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);

background:-ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);

background:linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);

}

빨간 부분은 수치를 마음껏 조절해서 쓰면 되는 부분.

.ellipsis:after 에 width, margin-left 의 속성값 (+/-)2em은 절대값이 같아야 함.

내가 사용한 코드는

only 파폭과 오페라 대응용이므로...

/* common ellipsis for firefox, opera */

html.firefox .ellipsis, html.opera .ellipsis {overflow:hidden;height:38px} /* 기본 2줄 */

html.firefox .ellipsis:before, html.opera .ellipsis:before {content:"";float:left;width:1px;height:38px}

html.firefox .ellipsis > *:first-child, html.opera .ellipsis > *:first-child {float:right;width:100%;margin-left:-1px}

html.firefox .ellipsis:after, html.opera .ellipsis:after {content:"\02026";float:right;position:relative;top:21px;left:100%;width:2em;margin-left:-2em;text-align:right;color:#777777;

box-sizing:content-box;

-webkit-box-sizing:content-box;

-moz-box-sizing:content-box;

background:-webkit-gradient(linear, left top, right top,from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));

background:-moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);

background:-o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);

background:-ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);

background:linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);

}

3. only 내가 추가적으로 쓴 코드

반응형 크기에 따라 아래 값을 자유롭게 조절해가며 말줄임의 위치를 바꿔준다.

html.firefox .ellipsis

, html.opera .ellipsis

, html.firefox .ellipsis:before

, html.opera .ellipsis:before {height:55px}

html.firefox .ellipsis:after

, html.opera .ellipsis:after {height:53px;top:33px}

-- IE 브라우저

 골칫 덩어리.

before, after를 이용한 ellipsis도 안 먹는다.

그래서 넌 그냥 스크립트로... ㅜ

신경써야 할 부분이 늘었지만, 스크립트로만 말줄임을 해줄때보단 속도가 빨라져서 괜찮음!

안구정화용ㅋㅋㅋ