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 到 class 的 HTML 属性
• 从 id 选择器到 class-selector 的 jQuery 选择器
• 从 id 选择器到 class-selector 的 CSS 选择器.

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