0

我正在研究组织结构图,并注意到我们的顾客的标题被省略号截断。

有没有办法更改 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但没有帮助。任何建议都会很棒,谢谢。

4

1 回答 1

0

这里指的是插件: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()
        }
    }
};
于 2016-03-21T03:38:59.530 回答