我正在研究JointJS。我在其中包含各种元素。但是,元素的宽度随文本的增加而增加。我想动态设置元素的大小,以使框可以达到最大高度和宽度,并通过自动换行来相应地扩展。如果文本不能适合最大高度和宽度元素,则可以动态减小字体大小。
我尝试在我的div ID中使用style="word-wrap: break-word;"
。但是没有效果。
<div id="myholder" style="word-wrap: break-word;"> </div>
我的持有人在JS文件中的定义如下:
var paper = new joint.dia.Paper({ el: $('#myholder'), width: 1200, height: 700, model: graph});
我可以采取什么策略? 最佳答案
也可以(如果您不想打扰其他形状)使用
joint.util.breakText()
效用。它是这样的:
var wraptext = joint.util.breakText('My text here', {
width: holderElement.size.width,
height: optionalHeight
});
之后,您可以在创建
wraptext
时将holderElement
添加到attrs
中。像这样:var holder = joint.shapes.basic.Rect({
//position, size blablabla
attrs: {
text: {
text: wraptext,
//text styling
}
}
});
我不得不说,您的持有人是整张纸,这有点奇怪,但是您可能可以以相同的方式使用它,只需在定义它时放入ojit_code。