javascript - 如何让字体大小自动调整到div的大小

Question

有以下情况:
我正在创建一个可以处理文本的组件，我目前的需求是根据文本的大小创建自动大小调整。
所以如果我有一个宽度为 50px 的内容，当文本达到这个最大级别时，它会自动减小字体。
我创建了一个完美运行的结构，但仅适用于 1 个组件调用，当我更频繁地调用它时，第一个文本的设置会丢失，并且只为最后一个文本保留正确的配置。
我怎么解决这个问题？
有没有办法通过css/js解决？
有没有办法通过 vue 解决，也许每次调用都会破坏实例？我怎样才能做到这一点？
这是代码:
家长

<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>

child

<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>

片段

$(document).ready(function() {
    $('#conteudo').textfill({
        maxFontPixels: 25
    });
});

#conteudo {
    width: 300px;
    height: 300px;
    border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jquery-textfill.github.io/js/textfill/jquery.textfill.js"></script>

<div id="conteudo">
    <span>
    <!-- type more data here !-->
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    </span>
   
</div>

<div id="conteudo">
    <span>
    <!-- type more data here !-->
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    </span>
   
</div>

要进行测试，只需在内容 1 和内容 2 中包含更多单词。请注意，1 工作正常。

Answer 1

您的问题与您对 id 的使用有关。 (在您的文档中应该是唯一的)而不是像 class 这样的其他东西(可以出现多次)。

id

The id global attribute defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

来源: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

class

The class global attribute is a space-separated list of the case-sensitive classes of the element. Classes allow CSS and Javascript to select and access specific elements via the class selectors or functions like the DOM method document.getElementsByClassName.

来源: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class
在您的代码段中，我已替换:

来自 id 的 HTML 属性至 class

从 id 选择器到 class-selector 的 jQuery 选择器

CSS 选择器从 id-selector 到 class-selector .

$(document).ready(function() {
    $('.conteudo').textfill({
        maxFontPixels: 25
    });
});

.conteudo {
    width: 300px;
    height: 300px;
    border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jquery-textfill.github.io/js/textfill/jquery.textfill.js"></script>

<div class="conteudo">
    <span>
    <!-- type more data here !-->
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    </span>
   
</div>

<div class="conteudo">
    <span>
    <!-- type more data here !-->
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    </span>
   
</div>