我有一个页面,其中包含使用chartist(https://gionkunz.github.io/chartist-js/)
生成的图表在图表下方,有一些标签。由于标签的长度,我需要旋转标签。
我已经能够用一些css做到这一点:
.ct-chart .ct-label.ct-horizontal.ct-end {
transform: translate(-15px, 15px) rotate(315deg);
white-space: nowrap;
}
然而,我现在面临一个问题:当标签太长时,其中一部分会被“切掉”。
我创建了一个jsfiddle来演示这个问题: https://jsfiddle.net/Ls5k2pr0/
答案 0 :(得分:2)
标签是隐藏的,因为溢出了svg
元素,它们也从原始点移开。像这样更新你的CSS:
.ct-chart-bar {
overflow: visible;
margin : 0 0 30px 0;
}
.ct-chart .ct-label.ct-horizontal.ct-end {
position: relative;
justify-content: flex-end;
text-align: right;
transform-origin: 100% 0;
transform: translate(-100%) rotate(-45deg);
white-space:nowrap;
}
这是更新的JSFiddle https://jsfiddle.net/Ls5k2pr0/1/
答案 1 :(得分:1)
我通过向margin : 0 0 30px 0;
css类添加边距.ct-chart-bar
来完成@xxxmatko答案。
整个解决方案是:
.ct-chart-bar {
overflow: visible;
margin : 0 0 30px 0;
}
.ct-chart .ct-label.ct-horizontal.ct-end {
position: relative;
justify-content: flex-end;
text-align: right;
transform-origin: 100% 0;
transform: translate(-100%) rotate(-45deg);
white-space:nowrap;
}
祝你好运!
答案 2 :(得分:0)
fiddle你可以添加省略号和填充到svg父级,即使标签很长,你也可以像示例一样添加省略号
<boost\[directory]>