如何使jointJs矩形文本响应，以使文本保留在矩形内？

Question

我正在创建一个矩形并在其中写入文本，但是文本出自矩形：

有什么方法可以将文本保留在jointJs的矩形内吗？

这是我的代码：

  var graph = new joint.dia.Graph;
  var paper = new joint.dia.Paper({ el: $('#paper'), width: 650, height: 250, gridSize: 1, model: graph });
  var r1 = new joint.shapes.basic.Rect({
    position: { x: 20, y: 20 },
    size: { width: 200, height: 200 },
    attrs: { rect: { fill: '#E74C3C' }, text: { text: 'this text is coming out from rectangle' ,
    fontSize: 14,
    fill: '#2b7aff'} }
  });

  graph.addCells([r1]); 

Answer 1

实际上，我是从jointJs文档中找到了我的问题的答案

https://resources.jointjs.com/docs/jointjs/v2.0/joint.html#util.breakText

但是他们（jointjs）仅描述了两个参数是一个问题

joint.util.breakText('this is quite a long text', { width: 50 })
// 'this is\nquite a\nlong\ntext'

，但是实际上还有第三个参数“样式” 所以实际的解决方法是

  var graph = new joint.dia.Graph;
  var paper = new joint.dia.Paper({ el: $('#paper'), width: 650, height: 250, gridSize: 1, model: graph });

  var text = joint.util.breakText('This is very very very very very very very very very very very very very very very very very very very very very very long text', { width: 20, height:20}, {lineHeight: 1.2});

  var r1 = new joint.shapes.basic.Rect({
    position: { x: 70, y: 30 },
    size: { width: 100, height: 80 },
    attrs: { rect: { fill: '#F1C40F' }, text: { text: text  } }
  });

  r1.embed(r1);
  graph.addCells([r1]);