Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12

[jQuery plugin] 파이어폭스와 크롬에서 한글 단어별로 줄바꾸기 jQuery word-break: keep-all Plugin

이 플러그인은 다들 아다시피 `word-break: keep-all` 속성이 모든 브라우저에서 지원됨에 따라 필요하지 않게 됐습니다.


오늘 플러그인을 하나 만들었다. 예전부터 만들고 싶었던 건데, 바로 한글을 단어별로 줄바꿈할 수 있도록 하는 플러그인이다.

이렇게 ‘다’만 달랑 다음 줄로 오는 경우를 싫어하는 사람들이 있다. 이걸 해결하려면 골치가 좀 아프다.

신기하게도 인터넷 익스플로러가 이 쟁점에서는 우위에 서 있다. CSS로 이걸 지원하기 때문이다. 아래 CSS 코드를 넣으면 익스플로러는 단어별로 줄바꿈이 된다. (아마 MS가 가장 세계화된 업체기 때문이 아닐까 싶다. 하지만 그럼 구글은 왜;;)

.target{
  word-break: keep-all;
}

물론 .target 요소가 block 요소여야 한다. 그래서 inline 요소를 그렇게 하고 싶을 때는

display: block;

을 추가해 줘야 한다.

비 IE 브라우저

인터넷 익스플로러가 아닌 브라우저들은 keep-all 을 지원하지 않기 때문에 따로 손을 써 줘야 하는데 보통 수동으로 <br>을 넣곤 한다. 그렇게 하면 자동화가 불가능해지고, 가로폭이 달라지면 위치 조정을 할 수 없게 되는 문제가 생긴다.

물론 아예 방법이 없는 건 아닌데, 필요한 경우에 CSS를 이용해 brdisplay: none 처리하면 해결되는 경우가 있다. 그러나 근본적인 해결책은 아니다.

그래서 아이디어를 낸 것이 자바스크립트를 이용해서 모든 단어를 각각 span으로 묶고 거기에 white-space: nowrap 속성을 주는 것이다.

오늘 만든 건 그걸 자동으로 해 주는 스크립트다. 늘 그냥 스크립트만 만들어 왔는데 오늘은 한 번 jQuery 플러그인으로 만들어 봤다. 앞으로 계속 활용하고 발전시켜 갈 생각으로 구글 코드에 레포지토리도 얻어서 넣어 버렸다. 이상.

[2013-09-04 추가 : 레포지토리를 기트허브로 옮겼다. ver.1.3부터는 GitHub에만 있다.]

▶jQuery word-break:keep-all Plugin 프로젝트 홈 가기

[2013-01-06 추가] 버전 1.2로 업데이트했다. 안에 태그가 있어도 작동하도록 했다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

댓글 (9개)

  • 익스플로러 8, 9 에서는 css 적용이 단어별 적용이 안되는 것 같은데 뭔가 빼먹고 적용을 해서 일까요?…..

    • 어라 이상하네요. 혹시 html 코드를 이메일로 보내주실 수 있나요? mytory쥐메일입니다.

        • 메일로 소스를;; 제가 테스트한 데선 다 됐기 때문에 작동 안 하는 환경을 알아야 해요 ㅠ

  • ios6 아이패드 사파리에서 자식HTML이 미적용 플러그인과 같이 동작합니다.

    div중첩 파트에서 “것입니다.”와 부분과 “이것은” 부분이 조금 애로사항이 있네요. 이게 부분별로 따로 동작할 가능성이 있나요 ;;;;;???

    • <strong style="color: #666" >이것은 div tag로 둘러싼 것입니다.</strong>
      글자가 자식 요소의 <>와 붙어 있는 경우엔 적용을 하지 않기 때문에 발생하는 현상입니다. 반영해서 예제를 고쳤습니다.
      코드를 아래처럼 고쳐서 잘 작동하게 했습니다.
      <strong style="color: #666" > 이것은 div tag로 둘러싼 것입니다. </strong>

  • 붓스트랩과 함께 적용하였는데, padding 부분 때문인지 responsive로 화면이 좁아지거나 모바일로 가게 되면 글씨가 div를 벗어나버리네요 ㅠ;

    • 단어를 줄바꿈하지 않도록 하는 플러그인이니 당연하지요.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다