Mushroom卡片在3.4.0版本后文本显示问题的分析与解决方案

问题背景

Mushroom卡片是一款流行的Home Assistant前端组件，用于构建美观的仪表盘界面。在3.4.0版本更新后，用户报告在使用card_mod自定义样式时，卡片中的文本无法完全显示，出现被截断的情况。

问题现象

当用户尝试通过card_mod增大字体大小时，文本内容会被部分截断，无法完整显示。具体表现为：

• 主标题和副标题文本超出可视区域
• 卡片高度没有随字体大小增加而自动调整
• 在3.3.0版本中表现正常，升级到3.4.0后出现问题

技术分析

经过开发者社区的分析，这个问题源于3.4.0版本中对主题变量的修改。具体变化包括：

1. 引入了固定的行高设置：

   • 主标题行高默认为20px
   • 副标题行高默认为16px

2. 这些固定值不会随字体大小变化而自动调整

3. 在之前的版本中，行高使用的是相对单位(1.5)，能够更好地适应不同字体大小

解决方案

针对这一问题，社区成员提出了几种有效的解决方法：

方法一：重置行高设置

在card_mod样式中添加以下CSS变量覆盖默认值：

ha-card {
   --card-primary-line-height: 1;
   --card-secondary-line-height: 1;
}

方法二：恢复旧版行高比例

如果希望保持与之前版本相同的行距比例，可以使用：

ha-card {
   --card-primary-line-height: 1.5;
   --card-secondary-line-height: 1.5;
}

方法三：全局主题覆盖

对于需要大规模应用的情况，建议在主题文件中统一设置这些变量，避免逐个修改卡片配置。

注意事项

1. 官方并不保证对card_mod的完全兼容支持
2. 不同版本的Mushroom卡片可能有不同的默认样式设置
3. 修改行高时需要考虑不同设备的显示效果
4. 建议在修改后进行充分的测试验证

总结

Mushroom卡片3.4.0版本的样式调整带来了更统一的外观，但也导致了与card_mod自定义样式的兼容性问题。通过理解CSS行高机制和变量覆盖原理，用户可以灵活调整设置，获得理想的显示效果。未来版本可能会进一步优化这一方面的兼容性。