html - 自动在RaphaelJS中将文字换行为宽度？

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

https://jsfiddle.net/qLvuztcy/

我已经尝试过类似的东西：

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

不幸的是，但这不是它的工作原理。有谁知道我怎么能做到这一点？我知道在文本中添加\n会换行，但是我不确定如何实现所需的功能。

最佳答案

对于Snap.svg的I found an answer，我已对其进行了一些修改。但是，它运行良好。

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

需要jQuery，因为我正在用jQuery做find("tspan")（也可以，因为我也在其他地方使用了它）。

我已经对其进行了修改，现在还可以在您的字符串中支持\n。

关于html - 自动在RaphaelJS中将文字换行为宽度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47328620/