Ant-Design-Vue-Pro多语言切换不同CSS 不同语言使用不同的CSS

在使用 locales 切换多语言时，英文有时候需要换行，就需要手动修改对应的CSS，而中文下不需要换行的样式，怎样做到根据语言选择的不同应用不同的样式呢？

为英文版本设置特定的CSS

label设置自动换行：

1
2
3
4
5
6
7
8
>>> .ant-form-item-label {
  display: inline-block;
  overflow: hidden;
  line-height: 18px;
  white-space: normal;
  text-align: right;
  vertical-align: middle;
}

仅在英文版本下，label自动换行：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <a-form :form="form" :lang="$i18n.locale">
    ...
  </a-form>
</template>

<script>
  ...
</script>

<style scoped>
:lang(en-US) >>> .ant-form-item-label {
  display: inline-block;
  overflow: hidden;
  line-height: 18px;
  padding-right: 8px;
  white-space: normal;
  text-align: right;
  vertical-align: middle;
}
</style>

软件版本：vue-antd-pro 3.0.2

  • “ant-design-vue”: “^1.7.6”
  • “vue”: “^2.6.0”,

参考资料