Is dealing with the following scenario:
I am currently working on a component that will handle text and my requirement is to implement automatic size adjustment based on the text length.
For example, if the content has a width of 50px, once the text reaches this limit, the font size should automatically decrease.
I've managed to create a structure that works perfectly for a single component call. However, when I make multiple calls to it, the settings for the first texts get lost, leaving only the correct configuration for the last text.
How can I resolve this issue?
Is there a way to address this using CSS/JS?
Could using Vue be a solution, possibly by destroying the instance with each call? How would I go about doing this?
Below is the code snippet:
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 add more words in both content 1 and content 2. Notice how one works correctly.