Html 在RaphaelJS中自动将文本换行到一定宽度？

我目前正在尝试添加一些文本，这些文本是使用RaphaelJS动态添加的。我希望文本在200像素处中断，然后继续下一行。就像在HTML中有一个带宽度的常规DIV一样

我试过这样的方法：

.text {
    width: 200px;
    max-width: 200px; //and this
}

---

但不幸的是，这不是它的工作原理。有人知道我怎样才能做到这一点吗？我知道在文本中添加一个

\n

会产生一个新行，但我不确定如何实现我想要的内容。

SVG没有自动文本包装。好吧，反正不是在当前版本中

你必须自己把文本分成几行。或者，如果在浏览器中显示SVG，则可以选择在SVG中嵌入HTML。您可以使用

元素执行此操作

---

我不确定Raphael是否有用于创建

foreignObject

元素的API。您需要进行调查。

SVG没有自动文本换行功能。好吧，反正不是在当前版本中

你必须自己把文本分成几行。或者，如果在浏览器中显示SVG，则可以选择在SVG中嵌入HTML。您可以使用

元素执行此操作

我不确定Raphael是否有用于创建

foreignObject

元素的API。您需要对Snap.svg进行研究。

，我对其进行了一些修改。然而，它工作得非常好

function text(x, y, txt, max_width, element_class) {
    var abc = "abcdefghijklmnopqrstuvwxyzæøåABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ";
    var temp = rsr.text(50, 50, abc);
    temp.node.classList.add("text");
    var letter_width = temp.getBBox().width / abc.length;
    temp.remove();

    var heights = [];

    var loopLines = txt.split("\n");
    for (j = 0; j < loopLines.length; j++) {
        var words = loopLines[j].split(" ");
        var width_so_far = 0,
            current_line = 0,
            lines = [''];
        for (var i = 0; i < words.length; i++) {
            var l = words[i].length;
            if (width_so_far + (l * letter_width) > max_width) {
                lines.push('');
                current_line++;
                width_so_far = 0;
            }
            width_so_far += l * letter_width;
            lines[current_line] += words[i] + " ";
        }

        if (j > 0) {
            y += heights[j - 1];
        }

        lines = lines.join("\n");
        var t = rsr.text(x, y, lines);
        $(t.node).find("tspan").attr("dy", "1.2em");
        t.node.classList.add(element_class);
        heights.push(t.getBBox().height);
    }
}

函数文本（x、y、txt、最大宽度、元素类）{
var abc=“abcdefghijklmnopqrstuvxyzæåabcdefghijklmnopqrstuvxyzÆØ”；
var temp=rsr.text（50，50，abc）；
temp.node.classList.add（“文本”）；
var letter_width=temp.getBBox（）.width/abc.length；
移除温度（）；
var高度=[]；
var loopLines=txt.split（“\n”）；
对于（j=0；j最大宽度）{
行。按（“”）；
当前_线++；
宽度（迄今为止）=0；
}
宽度\u至今+=l*字母\u宽度；
行[当前行]+=字[i]+“”；
}
如果（j>0）{
y+=高度[j-1]；
}
lines=lines.join（“\n”）；
var t=rsr.text（x，y，行）；
$（t.node.find（“tspan”）.attr（“dy”，“1.2em”）；
t、 node.classList.add（元素\类）；
高度。推动（t.getBBox（）.height）；
}
}

需要jQuery，因为我正在使用jQuery执行

find（“tspan”）

（也可以，因为我在其他地方也使用它）

我已经修改了它，现在还支持字符串中的

\n

。

对于Snap.svg，我已经做了一些修改。然而，它工作得非常好

function text(x, y, txt, max_width, element_class) {
    var abc = "abcdefghijklmnopqrstuvwxyzæøåABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ";
    var temp = rsr.text(50, 50, abc);
    temp.node.classList.add("text");
    var letter_width = temp.getBBox().width / abc.length;
    temp.remove();

    var heights = [];

    var loopLines = txt.split("\n");
    for (j = 0; j < loopLines.length; j++) {
        var words = loopLines[j].split(" ");
        var width_so_far = 0,
            current_line = 0,
            lines = [''];
        for (var i = 0; i < words.length; i++) {
            var l = words[i].length;
            if (width_so_far + (l * letter_width) > max_width) {
                lines.push('');
                current_line++;
                width_so_far = 0;
            }
            width_so_far += l * letter_width;
            lines[current_line] += words[i] + " ";
        }

        if (j > 0) {
            y += heights[j - 1];
        }

        lines = lines.join("\n");
        var t = rsr.text(x, y, lines);
        $(t.node).find("tspan").attr("dy", "1.2em");
        t.node.classList.add(element_class);
        heights.push(t.getBBox().height);
    }
}

函数文本（x、y、txt、最大宽度、元素类）{
var abc=“abcdefghijklmnopqrstuvxyzæåabcdefghijklmnopqrstuvxyzÆØ”；
var temp=rsr.text（50，50，abc）；
temp.node.classList.add（“文本”）；
var letter_width=temp.getBBox（）.width/abc.length；
移除温度（）；
var高度=[]；
var loopLines=txt.split（“\n”）；
对于（j=0；j最大宽度）{
行。按（“”）；
当前_线++；
宽度（迄今为止）=0；
}
宽度\u至今+=l*字母\u宽度；
行[当前行]+=字[i]+“”；
}
如果（j>0）{
y+=高度[j-1]；
}
lines=lines.join（“\n”）；
var t=rsr.text（x，y，行）；
$（t.node.find（“tspan”）.attr（“dy”，“1.2em”）；
t、 node.classList.add（元素\类）；
高度。推动（t.getBBox（）.height）；
}
}

需要jQuery，因为我正在使用jQuery执行

find（“tspan”）

（也可以，因为我在其他地方也使用它）

---

我已将其修改为现在还支持字符串中的

\n

。

我不能接受或投票将其作为答案，因为它不能回答我的问题。我找到了一个我已经实现的解决方案，现在正在测试。我将发布一个答案。现在你将它标记为一个副本，复制到一个完全不同的库中。干得好，保罗。真的很好。好了。快乐的我把它标为dup，因为答案几乎相同，我相信其他人应该得到这个荣誉。我还注意到，尽管你的答案与我说的完全一致，但你还是不怀好意地否决了我。如果你打算与大多数浏览器兼容，那么使用

是你最不想做的事情。我否决了你，因为你的回答没有给我任何新的信息。我知道SVG没有文本包装。我知道我可能不得不通过循环所有的线路来实现这一点。尽管你这么说，我知道不要使用

。你显然对拉斐尔的文字包装一无所知，这就是为什么我否决了你的评论。你肯定知道很多事情。遗憾的是，你在问题中没有提到这一点。我不能接受或反对这一回答，因为它没有回答我的问题。我找到了一个我已经实现的解决方案，现在正在测试。我将发布一个答案。现在你将它标记为一个副本，复制到一个完全不同的库中。干得好，保罗。真的很好。好了。快乐的我把它标为dup，因为答案几乎相同，我相信其他人应该得到这个荣誉。我还注意到，尽管你的答案与我说的完全一致，但你出于怨恨还是否决了我。如果你打算与大多数眉毛兼容，那么使用

是你最不想做的事情