时间戳

首页 > 解决方案 > 如何使字体大小自动调整为div的大小

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

问题描述

有以下情况：

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

因此，如果我有一个宽度为 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 可以正常工作。

标签： javascripthtmljquerycssvue.js

解决方案

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

推荐阅读