How to make the font size automatically adjust to the size of a div

user_13094884 0
Viewed 384

Has the following situation:

I am creating a component that will work with texts and my current need is to create automatic size adjustment depending on the size of the text.

So if I have a content whose width is 50px, when the text reaches this maximum level it automatically decreases the font.

I created a structure that is working perfectly, but only works for 1 component call, when I call it more often, the settings of the first texts are lost and the correct configuration is left only for the last text.

How can I solve this problem?

Is there any way to solve by css / js?

Is there any way to resolve by vue, perhaps destroying the instance with each call? how can I do this?

Here is the code:

Parent

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

Children

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

Snippet

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

To test, just include more words in both content 1 and content 2. Notice that 1 works correctly.

vue.js css html jquery javascript
2 Answers

Your problem relates to your usages of an id (which should be unique in your document) rather than something else like a class (which can appear multiple times).

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

Source: 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.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class

In your snippet I've replaced:

  • The HTML-attribute from id to class
  • The jQuery selector from an id-selector to a class-selector
  • The CSS selector from an id-selector to a 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>

user_21490930

You are using same id for each element. Multiple instance of a id is not html validated and while using JavaScript it will ignore other instance. It will only effect to one element. Replace your id by class and run the method on the class. @Stanislas answer is your perfect example solution.

user_40865250
Related