Change font-size based on string length in Vuejs

Question

<template>
 <div>
  <v-layout row wrap>
   <v-flex xs8>
     <div class="welcome">
       {{user.full_name}}
     </div>
   </v-flex>
   <v-flex xs4>
    <router-link :to="'/user_profile'">My Page</router-link>
   </v-flex>
  </v-layout>
 <div>
</template>

style.sass

.welcome
   font-size: 160%

I want the user.full_name to have dynamic font size based on the length of full_name because right now if the full_name is too long it doesn't fit and overlaps. Is there a way to have dynamic styling based on length of the string?

Does this answer your question? [dynamically changing the size of font size based on text length using css and html](https://stackoverflow.com/questions/18229230/dynamically-changing-the-size-of-font-size-based-on-text-length-using-css-and-ht) — Heretic Monkey, Mar 31 '21 at 15:39

score 3 · Accepted Answer · answered Mar 31 '21 at 15:42

3

You can use conditionals in class

<div :class="user.full_name.length<20? 'welcome': 'welcomeLarge'"></div>

answered Mar 31 '21 at 15:42

Nicolas I

234
4
15

Change font-size based on string length in Vuejs

1 Answers1