javascript - Word wrapping in JointJS - Stack Overflow

admin管理员组

文章数量:1279043

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?

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?

• javascript
• word-wrap
• jointjs

Share Improve this question Follow edited May 26, 2016 at 6:13 Vincent Bonhomme 7,45333 gold badges2929 silver badges3939 bronze badges asked May 23, 2014 at 7:22 LahoreLahore 13333 silver badges88 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 10

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.

To get word wrap working you can use joint.shapes.basic.TextBlock.

Now, to work with TextBlock you are going to set a top level map entry for "content" (instead of including "text" inside of "attrs" => "text" map entry)

    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>"
        })
    );

As you can see, the "content" entry can be raw html and will be rendered as such.

For this to work your browser needs to have SVG ForeignObject support, which most browsers these days have. To first check that this is the case you can run this in your console:

document.implementation.hasFeature("w3/TR/SVG11/feature#Extensibility","1.1")

I made a javascript function to wrap words based on the Line size and Max size of the shape you want the sentence wrap in.

If the sentence is very long then the function trim it and put 3 duts instead of the rest of the sentence.

Every Line size of the sentence the function put a '\n' (newline 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;
}

• LineSize = the max size of characters for every line you want inside your shape
• MaxSize = the max size of characters you want inside your shape
• sentence = description you want to put in your shape

If you are interested in creating custom element you can create like this

joint.shapes.devs.Model = joint.shapes.basic.TextBlock.extend( { markup: ['>', joint.env.test('svgforeignobject') ? '' : '',
''].join(''), defaults: joint.util.deepSupplement({ content: 'A content of the Activity' }});

本文标签： javascriptWord wrapping in JointJSStack Overflow