i18n 如何控制不同语言的字体大小？

Question

一个固定大小的div，由于中英文 文字数量差异很大，有可能中文一行的情况下英文要3行，如何使英文也显示一行？

Answer 1

i18n 好像没这种功能，但是可以手动调整适配

如果明确只要一行，那直接通过 css 实现就行了，如果单纯想把三行文本压缩到一行那估计都看不清了

.xxx-class {
  width: 16rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 2

以下回答来自chatgpt

存在问题是字体最小是浏览器限制大小，按照其思路可以获得比例，在目标div再套一层div，给内层使用transform:scale(x)来实现。
当文字内容超出一行时，可以使用自定义指令来控制文字大小，使其一行内显示。下面是一个示例的Vue 3自定义指令的代码：

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('fitText', {
  mounted(el) {
    const adjustFontSize = () => {
      const containerWidth = el.offsetWidth
      const contentWidth = el.scrollWidth
      const fontSize = parseFloat(window.getComputedStyle(el).fontSize)

      if (contentWidth > containerWidth) {
        el.style.fontSize = `${fontSize - 1}px`
        adjustFontSize()
      }
    }

    adjustFontSize()
  }
})

app.mount('#app')

<!-- App.vue -->
<template>
  <div class="container">
    <div class="content" v-fit-text>
      <!-- 文字内容 -->
    </div>
  </div>
</template>

<style>
.container {
  width: 200px; /* 宽度可以根据需要进行调整 */
  overflow: hidden;
}

.content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

在上面的代码中，我们创建了一个名为fitText的自定义指令，并在mounted钩子函数中实现了文字大小的调整逻辑。当指令绑定的元素被插入到DOM中时，会自动调用mounted函数。

在mounted函数中，我们首先获取容器的宽度和内容的宽度，然后获取当前的字体大小。如果内容的宽度超过容器的宽度，就将字体大小减小1像素，并递归调用adjustFontSize函数，直到内容的宽度不再超过容器的宽度为止。

在模板中，我们将自定义指令v-fit-text应用在包含文字内容的div上。通过设置容器的宽度和使用CSS属性来控制文字的显示方式，实现了文字一行内显示的效果。

请注意，由于文字大小的调整是在mounted钩子函数中进行的，所以如果文字内容发生变化，需要手动触发重新调整文字大小的逻辑。