在JointJS中自动换行

Question

我正在研究JointJS.我有各种带文字的元素.但是元素的宽度随着文本的增加而增加.我想动态设置元素的大小,使得盒子可以达到最大高度和宽度,并通过文本换行相应地扩展.如果文本os无法放入最大高度和宽度元素,则可以动态减少fontsize.

我试过style="word-wrap: break-word;"在我的div id中使用.但是没有效果.

<div id="myholder" style="word-wrap: break-word;"> </div>

我的持有人在JS文件中定义如下: var paper = new joint.dia.Paper({ el: $('#myholder'), width: 1200, height: 700, model: graph }); 我可以遵循什么策略？

Answer 1

也可以(如果你不想打扰额外的形状)使用

joint.util.breakText()

效用.它的工作原理如下:

var wraptext = joint.util.breakText('My text here', {
    width: holderElement.size.width,
    height: optionalHeight
});

之后,您可以在创建它时添加wraptext到您的holderElementattrs中.像这样:

var holder = joint.shapes.basic.Rect({
    //position, size blablabla
    attrs: {
        text: {
            text: wraptext,
            //text styling
        }
    }
});

我不得不说你的持有人是一整篇论文有点奇怪,但你可以用同样的方式使用它,只要把attrs它定义就可以了.