javascript - GetOrgChart jquery 插件 : Word Wrap text field won't work, 生成省略号

Question

我在处理组织结构图时注意到我们赞助人的头衔被省略号 chop 了。

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

我正在使用“夏娃”主题。如果您不熟悉 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 但它没有帮助。 任何建议都很好，谢谢。

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