Javascript 如何使字体大小自动调整为div的大小

有以下情况：

我正在创建一个组件，将与文本和我目前的需要是创建自动大小调整取决于文本的大小

因此，如果我有一个宽度为50px的内容，当文本达到这个最大级别时，它会自动减少字体

我创建了一个工作完美的结构，但只适用于1个组件调用，当我更频繁地调用它时，第一个文本的设置将丢失，而正确的配置仅适用于最后一个文本

我怎样才能解决这个问题

有什么办法可以通过css/js来解决吗

是否有任何方法可以通过vue解决问题，比如在每次调用时销毁实例？我该怎么做

代码如下：

母公司

孔杜多{ 宽度：300px； 高度：300px； 边框：1px纯红； } Lorem ipsum dolor sit amet，是一位杰出的献身者。 Lorem ipsum dolor sit amet，是一位杰出的献身者。

---

您的问题与您对一个id的使用有关，该id在您的文档中应该是唯一的，而不是像一个可以多次出现的类这样的东西

身份证件 id全局属性定义标识符id，该标识符id在整个文档中必须是唯一的。它的目的是在使用片段标识符、脚本或CSS样式进行链接时识别元素

资料来源：

班 class global属性是元素中区分大小写的类的一个以空格分隔的列表。类允许CSS和Javascript通过类选择器或DOM方法document.getElementsByClassName等函数选择和访问特定元素

资料来源：

在您的代码片段中，我替换了：

从id到类的HTML属性 从id选择器到 CSS选择器从一个id选择器转换为一个。 $document.readyfunction{ $'.conteudo'.textfill{ 最大像素：25 }; }; 孔杜多先生{ 宽度：300px； 高度：300px； 边框：1px纯红； } Lorem ipsum dolor sit amet，是一位杰出的献身者。 Lorem ipsum dolor sit amet，是一位杰出的献身者。

---

您对每个元素使用相同的id。id的多个实例不是经过html验证的，在使用JavaScript时，它将忽略其他实例。它只对一个元素有效。按类替换id并在类上运行该方法@Stanislas答案是您的完美示例解决方案

<template>
  <div>
    <div id="content" v-if="this.text != null && this.text != ''">
      <span>
        {{ this.resizeText(this.text) }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["text"],

  methods: {
    resizeText(text) {
      $(document).ready(function () {
        $("#content").textfill({
          maxFontPixels: 25,
        });
      });
      return this.text;
    },
  },
};
</script>

<style>
#content {
  border: 1px solid red;
  height: 50px;
  width: 300px;
}
</style>

<template>
  <div class="content-example">
      
    <gui-text-test
      :text="'APPLIED CORRECTLY APPLIED CORRECTLY  '"
    ></gui-text-test>

    <br>

    <gui-text-test
      :text="'DID NOT WORK DID NOT  '"
    ></gui-text-test>

    <br>

    <gui-text-test
      :text="'DID NOT WORK DID NOT WORK DID NOT WORK DID NOT WORK DID NOT WORK '"
    ></gui-text-test>

  </div>
</template>

<script>

import Text2 from '../Text/Text2.vue';

export default {
    components:{
        'gui-text-test': Text2
    }
}

</script>

<style>

</style>