如何使字體大小自動調整為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>

孩子們

<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

id全局屬性定義了一個標識符（ID），它在整個文檔中必須是唯一的。 其目的是在鏈接（使用片段標識符）、腳本或樣式（使用 CSS）時識別元素。

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

class

class 全局屬性是元素的區分大小寫的類的空格分隔列表。 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 選擇器到類選擇器的 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>

Answer 2

您為每個元素使用相同的 id。 id 的多個實例未經過 html 驗證，並且在使用 JavaScript 時，它將忽略其他實例。 它只會影響一個元素。 將您的 id 替換為 class 並在 class 上運行該方法。 @Stanislas 答案是您完美的示例解決方案。