[JavaScript] TreeView 사용하기 (fancytree) - 3 title 줄바꿈 하기

[JavaScript] TreeView 사용하기 (fancytree) - 3 title 줄바꿈 하기

---

노드(node)의 이름(title)들이 줄 바꿈이 안되고 원하는 너비를 넘어가면 Scroll-X 가 생성되어 보여진다.

원래 아래 노드의 이름은 `개구리 - 복사본` 이지만 X축 스크롤이 생기고 화면상 짤려져보인다.

`개구리 - 복사본` 글자 

X축 스크롤이 아닌, 글자가 자동 줄 바꿈이 되었으면 한다면 두 가지 방법이 있다.

먼저, 가장 간단한 방법은 css 속성을 이용하는 것이다.

 

방법1. css 속성 사용

span.fancytree-title { white-space: normal; }

 

방법1이 안 될 경우가 있다. 

그러면 두 번째 방법인 rendernode를 통해서 해결할 수 있다.

 

방법2. fancytree 의 rendernode 옵션 사용

node 랜더할 때 css 속성을 주는 것이다. 

margin은 본인의 UI에 맞게 수정하면 된다.

fancytree.createTree('#tree', {
	...
    renderNode: function(event, data) {
        var node = data.node;
        if (node.data) {
            var $span = $(node.span);
            $span.find("span.fancytree-title").text(node.title).css({
                "white-space": "normal",
                "white-break": "break-word",
                "margin": "0 39px 0 0"
            });
        }
    },
    ...
}

 

 

* 결과 화면

`개구리 - 복사본`이 자동 줄 바꿈되어 화면에 다 보인다.

 

---

[참고] https://github.com/mar10/fancytree/issues/277