按钮翻译后文本尺寸不匹配，如何调整按钮尺寸适配多语言内容？

• 采用动态宽度设计
  不要给按钮设置固定width属性，改用min-width加左右内边距padding控制最小尺寸，文本变长时按钮会自动适配内容宽度。可配合white-space: nowrap属性避免文本折行，保证所有语言下按钮高度统一，参考CSS代码：

  .action-btn {
    min-width: 64px;
    padding: 6px 16px;
    border-radius: 4px;
    white-space: nowrap;
  }
  

• 提前预留翻译膨胀空间
  不同语言相对英文的文本膨胀率不同，德语等西欧语言的文本长度比英文高15%-40%，设计按钮最小宽度时直接按最长的目标语言文本尺寸预留，确保所有翻译版本的文本都能正常展示。
• 小空间场景适配降级
  若移动端等场景下按钮区域空间有限，可采用两种降级方案：
  1. 给按钮添加文本溢出截断规则，超出部分显示省略号，同时加hover/长按tooltip展示完整翻译文本，参考CSS规则：text-overflow: ellipsis; overflow: hidden;
  2. 空间极端紧张时，可仅保留功能图标，隐藏按钮文本，给图标加tooltip提示功能。
• 多语言切换后主动重绘布局
  多语言包加载完成、页面文本替换完成后，主动触发一次布局重计算；如果使用前端UI框架，直接开启按钮组件自带的自动宽度配置项即可。

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