javascript - JointJS 中的自动换行

Question

我正在研究 JointJS。我有各种带有文字的元素。然而，元素的宽度随着文本的增加而增加。我想动态设置元素的大小，以便框可以达到最大高度和宽度，并通过文本换行相应地扩展。如果文本操作系统无法适应最大高度和宽度元素，则字体大小可能会动态减小。

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

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

我的holder在js文件中定义如下: var paper = new joint.dia.Paper({ el: $('#myholder'), 宽度:1200， 高度:700， 型号:图 }); 我可以遵循什么策略？

Answer 1

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

joint.util.breakText()

实用程序。它是这样工作的:

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

之后，您可以在创建 holderElement 时将 wraptext 添加到 attrs 中。像这样:

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

我不得不说你的 holder 是整张纸有点奇怪，但你可能可以用同样的方式使用它，只需在定义它时加上 attrs 即可。