网页图表仅增大行内文字字号不增加行高的实现求助

我懂你遇到的痛点了——想单独放大图表里的行内标签文字（比如P1 Data、P3 Data），但调用API调整字号时，连带着行高也被拉高了，之前试的CSS还没生效对吧？

给你两个靠谱的解决方案，按需选择：

方案1：精准定位元素，强制锁定行高 #

首先用浏览器开发者工具（F12）找到这些行内文本对应的DOM元素（比如很多图表库会把这类标签放在.tick text或者自定义类的<text>标签里），然后用CSS精准选中它们，单独设置字号的同时强制行高保持原值：

/* 替换成你实际找到的选择器 */
.chart-inline-label {
  font-size: 14px; /* 你想要的目标字号 */
  line-height: 1; /* 或者设置成图表原本的行高数值，比如1.2 */
  /* 如果是SVG文本，加上这个确保样式生效 */
  dominant-baseline: middle;
}

如果之前的CSS没生效，大概率是选择器优先级不够，试试给选择器加上父容器的ID/类提升优先级，或者临时用!important快速验证（不推荐长期依赖，但能快速排查问题）：

#chart-container .chart-inline-label {
  font-size: 14px !important;
  line-height: 1 !important;
}

方案2：用transform缩放文字（完全不影响布局） #

如果不想纠结行高数值，直接用transform: scale()视觉放大文字更省心——这种方式只会改变元素的视觉大小，不会影响布局的行高和其他元素位置：

.chart-inline-label {
  transform: scale(1.2); /* 放大1.2倍，按需调整比例 */
  transform-origin: left center; /* 让文字以左侧居中为基准缩放，避免偏移 */
}

记得先确认你选中的是正确的DOM元素，毕竟不同图表库生成的结构差异挺大的，用开发者工具的元素选择器点一下文字，就能看到对应的类或标签啦。

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