Highcharts 条形图类别分词答案

【问题标题】：Highcharts Barchart Category Word breaksHighcharts 条形图类别分词
【发布时间】：2019-01-31 22:08:55
【问题描述】：

我有一个水平条，我在垂直轴上有文本标签。在德语中，我们有一些很长的单词，所以在手机上有时会显示 4/5 标签和一些图表。

在 HTML 中，我们使用连字符在文本中插入软连字符“\u00AD”。然而，Highcharts 只用空格和“-”换行。是否有任何不可见的字符也会触发换行符？

xAxis: {
    categories: ['Something-Bomething-Comething', 'Something Bomething Comething', 'Kommunikationsdienste'],  
    labels: {
        useHTML: true
    }
},

我确实尝试使用格式化程序和 useHTML，但它仍然不理解 html 空白行为，设置宽度也不起作用，因为它不能分解长字。

【问题讨论】：

标签： highcharts

【解决方案1】：

您需要为word-break 和text-overflow 设置正确的样式：

xAxis: {
    categories: ['Something-Bomething-Comething', 'Something Bomething Comething', 'Kommunikationsdienste'],
    labels: {
        useHTML: true,
        style: {
            'word-break': 'break-all', //break-word
            'text-overflow': 'ellipsis',
            width: '50px'
        }
    }
}

现场演示：https://jsfiddle.net/BlackLabel/rsvjaxb8/

API 参考：https://api.highcharts.com/highcharts/xAxis.labels.style

【讨论】：