글자 수 오버시 처리방법

§

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: ,

카테고리:

Ω

5 Comments

  • codei says:

    WOW !
    언제나 꿀팁 감사합니다 ㅎㅎ
    나중에 코더분 면접 할때 레벨 테스트의 좋은 지표가 될것 같아요.
    지금 당장 알고있냐 없냐가 아니라, 불가능 하다고 생각 하는 코더와 가능 하다고 생각 하는 코더의 차이?
    저도 반성하고 더욱 정진해야 겠어요 ㅎ

    • Matthew says:

      에이… 이런건 꼼수에 불과한데, 이런걸로 면접테스트 보면 안되죠. ㅎㅎㅎ

      제 개인적으로 가장 견디기 힘든 직원은, 기본기는 착실한데, 코딩에 있어서 창의력이 없는 직원.

      고지식하게 FM 으로, 배운데로만 하려고 끙끙거리고 있는 모습을 보면, 막 뒷목이 뻑뻑해지고, 이러다가 stroke (뇌졸증?) 오는거 아닌가 싶을때가 있습니다. (특히 월요일 아침에. ㅋㅋㅋ)

      겉으로 화는 못내고, 최대한 감정을 자세한 상태에서 그건 그렇게 하지 말고, 이렇게 하는게 어떻까? 라고 말하지만, 제 뱃속은 막 뒤집어 지고 있고, 막, 머리통이 뜨거워 지는 것 같고, 이런 직원하고는 같이 오래 일 못하겠더라구요.

      제가 성격이 괴팍해서 그런 것 같습니다. ㅋㅋㅋㅋ

  • 한성훈 says:

    좋은 방법이긴한데 “…” 자체가 본문영역을 벗어나서 생성되네요..
    한글 경우 요즘은 `word-break:keep-all`을 활용하여 단어별 줄바꿈 많이 사용하는데
    줄바꿈 되는 단어가 길 경우 줄바꿈 전 단어와 항상 고정되어 있는 “…” 사이가 부자연스럽게 벌어질꺼 같습니다. (영문포함)

    • Matthew says:

      word-break:keep-all 은 CJK (중일한) 언어에만 적용되기 때문에 영문에 아무런 영향을 주지 않습니다.

      https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

      그리고 한글의 경우도 text-align: justify 를 주면 단어간 간격이 알아서 자동으로 벌어지고 좁혀지기 때문에 부자연스럽지 않습니다.

      마지막으로 “…” 이 본문영역에서 벗어나는게 싫으시면 밀어 넣으세요. ㅎㅎ

      여러가지 방법이 있겠네요. “…” 의 자리를 right:1em 을 주셔서 밀어넣고, 겹치는 text 를 background 로 가려버리시던가, 정말 옛날 방식으로 1px X 1px gif 를 껴 넣으시고 gif 넓이 늘려서 옆으로 밀어 넣으시던가.

      codei 님 말씀데로 그런 미세한 부분은 “예술적으로” 잘 처리하시면 됩니다. ㅎㅎㅎ

      아, 제가 한국어를 100% 이해하지는 못하지만, word-break:keep-all 은 한글의 경우에 꼭 필요할까요? 하나의 단어가 다른 줄로 나눠진다고 이상하지 않던데… 영문의 경우는 문제지만, 한글은 글쎄요… 별로 상관 없는 것 같습니다.

  • jtmoon says:

    허억 돌아오시자마자 이런 꿀팁을 공유해주시다니 ! 혹시 허락해주신다면
    http://okky.kr 라는 사이트에 퍼가도 될까요?

Leave a Reply

Your email address will not be published. Required fields are marked *