Angular.js에서 CJK break-word 구현하기

얼마 전에 단어 단위로 줄바꿈이 되도록 구현해달라는 요청이 들어와서 해결한 기록을 남긴다.

CSS의 break-word 속성은 안타깝게도 아시아권 문자(CJK)에 적용되지 않는다.
참고: word-break - CSS | MDN
따라서 해결하려면 뭔가 꼼수를 부려야하는데, 이 부분을 동료 분이 코칭해주셔서 해결했다.

Angular.js의 filter를 이용한 꼼수이다.
방법은 텍스트를 단어별로 element로 쪼개서 element마다 display: inline-block속성을 주고 ng-html-bind를 거는 것이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

angular.module('myAngularApp').filter('breakWordCjk', [
  "$sce", function($sce) {
    return function(text) {
      var broken, regex;
      if (text) {
        regex = / +/g;
        broken = text.split(regex).map(function(word) {
          return '<span style="display: inline-block;">' + word + '&nbsp;</span>';
        }).join('');
        return $sce.trustAsHtml(broken);
      }
    };
  }
]);

trustAsHtml()은 안전하게 HTML element를 bind하기 위해 사용하는 것인데 ng-html-bind를 사용하기 위해서 반강제적으로 써야한다.
여하튼 이렇게 <span> elements로 만들어 둔 뒤에, 아래와 같이 filter를 먹이면 잘 동작한다.

1

<div class="title" ng-html-bind="title | breakWordCjk"></div>

당연히 Angular.js만 가능한 해법이 아니고, 순수 자바스크립트만 써도 무난하게 가능할 것이다.

2016-02-17 Update

현재 이 부분이 그대로 bower component로 만들어져 GitHub 레포지토리에 올라가 있다.