将文本换行以适合矩形：raphael答案

【问题标题】：wrap text to fit into a rectangle : raphael将文本换行以适合矩形：raphael
【发布时间】：2012-01-07 17:34:46
【问题描述】：

任何人都知道可以在单词边界处打破文本以适应矩形的功能

以下是矩形和文本的代码

  window.onload = function () { 

    var outsideRectX1=30, outsideRectY1=30,outsideRectX2=220, outsideRectY2=480, outsideRectR=10;
    var group = paper.set();


    var rect1=paper.rect(outsideRectX1+40, outsideRectY1+70, 80, 40,10);
    var text3=paper.text(outsideRectX1+75, outsideRectY1+85,"Test code for wrap text").attr({fill: '#000000', 'font-family':'calibri', 'font-size':'14px'});

    group.push(rect1);
group.push(text3);

     };

当文本大于矩形宽度时，它会自动换行，以便始终显示在矩形边界内。

【问题讨论】：

类似这样的东西：stackoverflow.com/questions/3142007/…
@RobSegerink 我已经以同样的方式实现了。但是还有其他更好的选择吗？

标签： javascript raphael

【解决方案1】：

我不确定是否有任何直接的方法可以根据矩形的大小来包装文本。可能您可以指定换行符或“\n”。或者，您可以尝试在文本长度增加时调整矩形的大小。

这是一个示例代码，其中矩形随着文本长度的增加而调整大小。

var recttext = paper.set();
el = paper.rect(0, 0, 300, 200);
text = paper.text(0,10, "Hi... This is a test to check whether the rectangle dynamically changes its size.").attr({"text-anchor":"start",fill:'#ff0000',"font-size": 14});
text1=paper.text(0,30,"hi").attr({"text-anchor":"start",fill: '#ff0000',"font-size": 14});
//el.setSize(495,200);
recttext.push(el);
recttext.push(text);
recttext.push(text1);
alert(recttext.getBBox().width);
alert(recttext.getBBox().height);
var att = {width:recttext.getBBox().width,height:recttext.getBBox().height};
el.attr(att);
recttext.translate(700,400);

【讨论】：

【解决方案2】：

我知道现在有点晚了，但您可能对我的 [Raphael-paragraph][1] 项目感兴趣。

这是一个小型库，可让您创建具有最大宽度和高度限制、行高和文本样式配置的自动换行多行文本。它仍然处于测试阶段，需要大量优化，但它应该可以满足您的目的。

GitHub 页面上提供了使用示例和文档。

【讨论】：