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 に答える