GetOrgChart jquery 插件：自动换行文本字段不起作用，而是生成省略号答案

【问题标题】：GetOrgChart jquery plugin: Word Wrap text field won't work, produces ellipses insteadGetOrgChart jquery 插件：自动换行文本字段不起作用，而是生成省略号
【发布时间】：2015-04-10 13:40:24
【问题描述】：

我正在制作一个组织结构图，并注意到我们的赞助人的标题被省略了。

有没有办法将 CSS 或文件更改为换行？

我正在使用“Eve”主题。如果您对 GetOrgChart 不熟悉，这里是相关代码：

            $("#people").getOrgChart({
            theme: "eve",
            primaryColumns: ["Name", "Title"],
            imageColumn: "Image",
            linkType: "M",
            editable: false,
            dataSource: s
        });

eve: {
    size: [500, 220],
    toolbarHeight: 46,
    textPoints: [{
        x: 5,           //Name Text
        y: 200,
        width: 490
    }, {
        x: 150,         //Title Text
        y: 40,
        width: 350
    }, {
        x: 210,
        y: 65,
        width: 290
    }, {
        x: 210,
        y: 90,
        width: 290
    }, {
        x: 210,
        y: 115,
        width: 290
    }, {
        x: 210,
        y: 140,
        width: 290
    }],
    textPointsNoImage: [{
        x: 10,
        y: 200,
        width: 490
    }, {
        x: 10,
        y: 40,
        width: 490
    }, {
        x: 10,
        y: 65,
        width: 490
    }, {
        x: 10,
        y: 90,
        width: 490
    }, {
        x: 10,
        y: 115,
        width: 490
    }, {
        x: 10,
        y: 140,
        width: 490
    }],
    box: '<path class="get-box" d="M0 0 L500 0 L500 220 L0 220 Z"/>',
    text: '<text width="[width]" class="get-text get-text-[index]" x="[x]" y="[y]"}">[text]</text>',
    image: '<image xlink:href="[href]" x="10" y="-20" height="170" preserveAspectRatio="xMidYMid slice" width="130"/>'

我还将 CSS 缩小为标题文本的此属性：

.get-org-chart .get-oc-c .get-text {
    fill:#fff;
    font-size:20px;
}

我试过 width 和 word-wrap: break-word，但没有帮助。任何建议都会很棒，谢谢。

【问题讨论】：

那么是全文实际存在还是图表在输出前进行了剪辑？
我不确定。 JS 很长，而且变量名没有命名为有用的东西，所以试图弄清楚这一点被证明是一个挑战..
用控制台检查 DOM 中的元素会告诉你。

标签： javascript jquery html css orgchart

【解决方案1】：

这里指的是插件：GetOrgChart

查看 JavaScript：代码检查计算出的文本长度的宽度，将其与主题的宽度值 (490) 进行比较——如果更大，则将文本替换为省略号。不幸的是，这里不能选择自动换行，除非您修改代码。在主题中设置宽度可能会有所帮助，但这可能会导致其他问题，例如与其他框重叠。

这里是javascript：

getOrgChart._zk = function (a) {
    for (i = 0; i < a._zu.length; i++) {
        var d = a._zu[i].getAttribute("x");
        var c = a._zu[i].getAttribute("width");
        var b = a._zu[i].getComputedTextLength();
        while (b > c) {
            a._zu[i].textContent = a._zu[i].textContent.substring(0, a._zu[i].textContent.length - 4);
            a._zu[i].textContent += "...";
            b = a._zu[i].getComputedTextLength()
        }
    }
};

【讨论】：