Word wrapping in JointJS

问题

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?

回答1:

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.

回答2:

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.org/TR/SVG11/feature#Extensibility","1.1")

回答3:

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

回答4:

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

来源：https://stackoverflow.com/questions/23823295/word-wrapping-in-jointjs

标签

javascript

word-wrap

jointjs