我正在处理组织结构图,并且注意到我们顾客的标题被省略了。
有没有办法将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
,但没有帮助。任何建议都很好,谢谢。
最佳答案
这是指插件: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()
}
}
};