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

【问题标题】：How to make the font size automatically adjust to the size of a div如何使字体大小自动调整为div的大小
【发布时间】：2021-06-04 08:20:44
【问题描述】：

有以下情况：

我正在创建一个可以处理文本的组件，我目前的需要是根据文本的大小创建自动大小调整。

所以如果我有一个宽度为 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>

儿童

<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 可以正常工作。

【问题讨论】：

标签： javascript html jquery css vue.js

【解决方案1】：

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

身份证

id 全局属性定义了一个标识符 (ID)，该标识符必须在整个文档中是唯一的。其目的是在链接（使用片段标识符）、脚本或样式（使用 CSS）时识别元素。

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

类

class 全局属性是元素的区分大小写的类的空格分隔列表。类允许 CSS 和 Javascript 通过类选择器或函数（如 DOM 方法 document.getElementsByClassName）选择和访问特定元素。

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

在你的 sn-p 中我已经替换了：

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

【讨论】：

【解决方案2】：

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

【讨论】：