글자 수 오버시 처리방법

§

subway

이글은 아래 질문글에 대한 완벽한 해결책 입니다.

http://kopress.kr/topic/글자-수-오버시-처리/

한줄에 대한 ellipsis (…): 글줄임 은 저 질문글 댓글에도 기재해 놓았듯이 css 만으로 크로스 브라우징이 가능 합니다.

아, 일단 왜 한글은 php 나 js 로 string 을 자르면 안되는가? 영문 알파벳은 각 letter 가 동일한 넓이를 차지하지만 한글은 그렇지 않기 때문에 “string 을 기준으로 하면 서로 매우 다른 결과가 나타나기 때문입니다” 라고 하는 일부 주장도 있으나 그 문제뿐 만은 아닌것 같고, 다른 이유때문인지, 상당히 불규칙하게 글이 짤립니다.

일반적으로 여러줄로 표시되는 글을 css 만으로 잘라내는 방법은 존재하지 않는다고 알려져 있습니다.

%ed%81%ac%eb%a1%9c%ec%8a%a4%eb%b8%8c%eb%9d%bc%ec%9a%b0%ec%a7%95%ec%9c%bc%eb%a1%9c%eb%8a%94_%eb%b6%88%ea%b0%80%eb%8a%a5

http://stackoverflow.com/questions/5269713/css-ellipsis-on-second-line

그래서 dotdotdot 이라는 jQuery 플러그인을 씁니다. (물론 CSS Tricks 의 Chrs Coyier 는 그냥 쿨하게 IE 에서 … 표시 안되는거는 그냥 무시하고 넘어가라고 말합니다. ㅋㅋㅋ

http://dotdotdot.frebsite.nl/

저는 jQuery 를 가급적 사용하지 않으려 합니다. (로딩속도 문제 때문에)

codei 님이 언급하신 css + js 기법도 아마 이 플러그인 과 같은 방식과 css 를 적절히 조합해서 구현하는 방법을 말씀하신 듯 합니다.

그런데 단지 쩜 3개 찍자고 jQuery 를 쓰다니, 참 찜찜하죠.

제가 처음에 생각한 방식은 위 질문글에 답글로 남겼듯이 브라우져 detection 을 해서 IE 인 경우에만 (…) 을 달아주는 방식이었습니다. (Result 탭을 누르시면 결과물이 보입니다.)

IE Edge 브라우져에서 보시면 IE 에서도 … 이 달린게 보이실겁니다.

그런데 생각해보니까, … 이것 역시 자스의 힘을 빌리고 있다는….

그리고 일이 바빠져서 이걸 그냥 방치해두고 있었는데, 참 제가 바보같은 생각을 한게, 뭐하러 브라우져 detect 를 하지?

브라우져 detect 할거 없이 그냥 어느 브라우져에서나 … 을 달아주면 되잖아!!!

라는 생각이 들었습니다. (Result 탭을 누르시면 결과물이 보입니다.)

IE 의 모든 브라우져에서 완벽하게 … 이 구현됩니다. 푸하하하.

왜 개발자들이 css 만으로 이걸 구현하게 불가능하다고 말하는지 모르겠습니다.

그냥 안된다고 알려져 있으니까, 그래서 jQuery 플러그인까지 존재하니까, 다들 안되는거다 라고 단정지어 버린 문제 같습니다.

24인용 군용 텐트는 절대 혼자 칠수 없다. 불가능하다.

되는데요. – 벌레.

안된다고, 불가능하다고 여겨지는 것들을 일단 시도해보는 자세도 나쁘지 않은 것 같습니다.

이렇게 가능한 경우도 있으니까요. ㅎㅎㅎㅎ

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: ,

카테고리:

Ω