CODEWITHSUNDEEP
javascriptcssvue.jssass
user12763413
user12763413

Reputation: 1349

Change font-size based on string length in Vuejs

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

Upvotes: 0

Views: 1421

Answers (1)

Nicolas I
Nicolas I

Reputation: 234

You can use conditionals in class

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

Upvotes: 3

Related Questions