JointJS 中的自动换行 [英] Word wrapping in JointJS

问题描述

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

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

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

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

解决方案

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

joint.util.breakText()

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

var wraptext = joint.util.breakText('我的文字在这里', {宽度:holderElement.size.width，高度:可选高度});

之后，您可以在创建它时将 wraptext 添加到您的 holderElement 中作为 attrs.像这样:

var holder = joint.shapes.basic.Rect({//位置，大小blablabla属性:{文本: {文本:包装文本，//文字样式}}});

我不得不说，你的持有人是一整篇论文有点奇怪，但你可能可以用同样的方式来使用它，只需在定义时加上attrs即可.

I am working on JointJS. I have various elements with text in it. However the element's width increases with increase in text. I want to dynamically set the size of element such that there is a maximum height and width that the box can attain and expands accordingly by text wrapping. If the text os unable to fit in the maximum height and width element, then the fontsize may be reduced dynamically.

I hav tried using style="word-wrap: break-word;" in my div id. However there is no effect.

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

My holder is defined in the JS file as follows: var paper = new joint.dia.Paper({ el: $('#myholder'), width: 1200, height: 700, model: graph }); What strategy may I follow?

解决方案

It is also possible (if you don't want to bother with extra shapes) to use the

joint.util.breakText()

utility. It works like this:

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

After that you can add wraptext to your holderElement as into attrs when creating it. Like this:

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

I have to say it's a bit strange that your holder is an entire paper, but you can probably use it the same way, just put the attrs when you define it.

这篇关于JointJS 中的自动换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！