jstreeのノードに改行を入れたい


お世話になります。
以下より[jstree]を使ってツリーメニューを作成しているのですが
ノードに改行を入れると次の行に改行以降の文言が被ってしまいます。

下記サイトや検索もしたのですがそれらしい情報が見つかりませんでした
http://www.jstree.com/

>|html|
<html>
<head>
<link rel="stylesheet" href="js/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="js/jstree/dist/themes/default/style.min.css" />
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
</head>

<body>
<div id="jstree">
<ul>
<li>1
<ul>
<li>1-1</li>
<li>1-2
<ul>
<li>1-2-1</li>
<li>1-2<br>-2被ってしまう部分</li>
<li>1-2-3</li>
</ul>
</li>
</li>
</ul>
</ul>
</div>

<script src="js/jstree/dist/libs/jquery.js"></script>
<script src="js/jstree/dist/jstree.min.js"></script>
<script>
$(function () {

//指定要素をjstreeインスタンス化
$('#jstree').jstree({

});

});
</script>

</body>
</html>
||<

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/08/20 11:08:37
  • 終了:2014/08/27 11:10:04

回答(1件)

id:Lhankor_Mhy No.1

Lhankor_Mhy回答回数779ベストアンサー獲得回数2302014/08/20 16:07:01

CSSに以下を追加するとどうなりますか。

.jstree-anchor {
  vertical-align: baseline;
}
id:a-kuma3

"jstree multi-line" で、ググると、こんなのがひっかかる。
https://groups.google.com/forum/#!topic/jstree/cFodTQTyVyk
https://code.google.com/p/jstree/issues/detail?id=670

GitHub のアイコンから、Ivan Bozhanov は jstree の GitHub の本人と思われるのだけれど、今年の書き込みで、本人から、こんな書き込みが。

I did not plan on supporting multi-line labels. Anyway I can have a look as soon as 3.0.0 final is released.

https://groups.google.com/forum/#!topic/jstree/tgrRL7Y-Ifc

jstree の demo のスタイルを確認すると、メニューの項目の li の内側にある DIV.jstree.wholerow が position:absolute になってるので、一筋縄ではいかない感じがします。

2014/08/20 23:17:17
id:teioh12

Lhankor_Mhyさん
a-kuma3 さん

反応遅れてしまい申し訳ございません。
お二人ともご回答ありがとうございます

色々試してみたのですが現時点では難しそうですね
公式で対応するのを期待したい所ですが望みも薄そう

2014/08/28 10:58:18
  • id:a-kuma3
    元々、jstree が模倣している、ツリーの表現だと、ノードに表示されるテキストが複数行になっているものは、ほとんど見ません。
    長いノード名になるなら、ノードのテキストは、適当な長さで省略して、title 属性などのツールチップで、複数行の全文を記載する方が、統一感があると思います。

    <ul>
    <li title="長いノード名になるなら、ノードのテキストは、
    適当な長さで省略して、title 属性を複数行にする方が、
    統一感があると思います。">長いノード名になるなら、...
    </ul>

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません