我正在研究 JointJS。我有各种带有文本的元素。然而，元素的宽度随着文本的增加而增加。我想动态设置元素的大小，以便框可以达到最大高度和宽度，并通过文本换行相应地扩展。如果文本 os 无法容纳最大高度和宽度元素，则可以动态减小字体大小。
我试过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
});
我可以遵循什么策略？
也可以（如果您不想打扰额外的形状）使用
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在你定义它的时候加上。
要使自动换行工作，您可以使用joint.shapes.basic.TextBlock。
现在，要使用 TextBlock，您将为“内容”设置顶级地图条目（而不是在“属性”=>“文本”地图条目中包含“文本”）
graph.addCell (
new joint.shapes.basic.TextBlock({
position: { x:100, y:100 },
size: { width: 100, height: 100 },
attrs: { rect: { fill: 'green' }},
content: "<p style='color:white;'>asdf asdf asdf asdf this needs to word wrap</p>"
})
);
如您所见，“内容”条目可以是原始 html，并且将按原样呈现。
为此，您的浏览器需要支持 SVG ForeignObject，这是当今大多数浏览器所支持的。要首先检查是否是这种情况，您可以在控制台中运行它：
document.implementation.hasFeature("w3.org/TR/SVG11/feature#Extensibility","1.1")
我制作了一个 javascript 函数来根据您希望句子换行的形状的 Line size 和 Max size 换行。
如果句子很长，那么函数会修剪它并放置 3 个 duts 而不是句子的其余部分。
该函数在句子的每一行大小中放置一个 '\n'（换行符 ASCII）。
var sentenceWrapped = function (sentence, lineSize, maxSize) {
var descriptionTrim = "";
if (sentence.length + 3 > maxSize) {
descriptionTrim = sentence.substring(0, maxSize - 3);
descriptionTrim = descriptionTrim + '...';
}
else {
descriptionTrim = sentence
}
var splitSentence = descriptionTrim.match(new RegExp('.{1,' + lineSize + '}', 'g'));
var sentenceWrapped = "";
for (i = 0; i < splitSentence.length; i++)
{
sentenceWrapped = sentenceWrapped + splitSentence[i] + '\n';
}
return sentenceWrapped;
}
如果您有兴趣创建自定义元素，您可以像这样创建
joint.shapes.devs.Model = joint.shapes.basic.TextBlock.extend( { 标记: ['>', joint.env.test('svgforeignobject') ? '' : '',
''].join(' ')，默认值：joint.util.deepSupplement({ content: 'A content of the Activity' }});