如何限制HTML多行label为2行 解决图表Y轴标题与刻度重叠问题

解决方案 #

你可以通过以下两种方式实现强制2行显示，避免-单独占行：

方案1：仅通过CSS样式控制（无需修改文本内容）

给label添加对应的CSS属性控制断行规则，同时限制容器宽度：

<label style="display: inline-block; max-width: 80px; word-break: keep-all; white-space: normal;" title="long title">I already shorten title</label>

各属性说明：

• max-width：根据Y轴预留的标题宽度调整数值，确保内容总宽度超过该值时只会拆成2行
• word-break: keep-all：禁止-符号前后自动换行，从根源避免-单独占行的问题
• white-space: normal：保留正常的自动换行能力，内容超出宽度时自动折行

方案2：手动插入换行符（效果最稳定可控）

如果你可以修改label的文本内容，直接在需要换行的位置插入<br>标签，完全固定换行位置：

<label style="" title="long title">some text<br>- some text</label>

如果是使用ECharts、Highcharts等第三方图表库实现的Y轴标题，可直接在标题文本中插入\n手动换行，同时配置标题文本的最大宽度限制多余内容即可。

内容的提问来源于stack exchange，提问作者Karol