在使用 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”,