如果字符超过特定字符数，请更改字体大小

Question

如果名称在 vueJS 中超过 15 或 20 个字符，如何更改字体大小？

这是我的代码

<p class="name" v-if="roleProfile"><b>{{ roleProfile.company_name }}</b></p>

Answer 1

创建一个计算属性，以根据roleProfile.company_name的长度将类添加到<p>标记：

computed: {
  profileClass() {
    let profileClass = "name";
    if (this.roleProfile.company_name.length > 15) {
      profileClass += " smallFont";
    }
    return profileClass;
  }
}

然后在模板中：

<p :class="profileClass" v-if="roleProfile">
  <b>{{ roleProfile.company_name }}</b>
</p>

Answer 2

我做了一个函数，并用：style="{ fontSize： heroFontSize }将其分配给我的div基本上我使用了相反的比例，我定义了最小和最大字符大小，并与最大和最小字符数进行了比较。我得出的结论是，每 2.5 个字符，我必须将大小减小 1px。所以下面你找到结果。

heroFontSize() {
      //we map the font sizes between 60chars and 200 chars from 100px to 50px
      // there's a reverse ratio between character count and the font size
      var minSize = 60;
      var textLength = this.question.length;
      //for every 2.5 characters we decrease the size with 1px
      var multiplier = 2.5;
      return 100 - (textLength - minSize) / multiplier + "px";
    },