smaller font if overflow

src/components/Header.vue

@@ -2,7 +2,7 @@
 <template>
   <div class = "header">
     <h2>
-    <router-link tabindex="0" :id="title_id"  :to="$parent.link_to_self.ref" @click.native="$parent.details_click($parent.link_to_self)" v-bind:class="{'long_lemma': long_lemma}" class="article_header">
+    <router-link tabindex="0" :id="title_id" :to="$parent.link_to_self.ref" @click.native="$parent.details_click($parent.link_to_self)" v-bind:class="{'long_lemma': long_lemma}" class="article_header">
     <span v-for="(lemma, index) in lemmas" :key="index">{{lemma.lemma}}<span :aria-label="hgno_arabic" class="hgno" v-if="$store.state.showHGNO && hgno(lemma)">{{" "+hgno(lemma)}}</span><span class="title_comma" v-if="lemmas[1] && index < lemmas.length-1">{{", "}}</span>
     </span>
     </router-link></h2>
@@ -48,6 +48,21 @@ export default {
     dictionary: String,
     article_id: Number,
     title_id: String
+  },
+    data: function() {
+    return {
+      menu: false,
+      long_lemma: false
+    }
+  },
+  mounted: function() {
+
+    //console.log(this.$refs[this.title_id])
+    //console.log(document.getElementById(this.title_id).offsetWidth, document.getElementById(this.title_id).scrollWidth)
+    if (this.$el.scrollWidth > this.$el.offsetWidth) {
+      this.long_lemma = true
+    }
+
   },
   methods: {
     hgno: function(lemma) {
@@ -59,13 +74,6 @@ export default {
     }
   },
   computed: {
-    long_lemma: function(lemma) {
-      for (const lemma of this.lemmas) {
-        if (lemma.lemma.length > 18) return true
-      }
-      return false
-
-    },
     secondary_header_text: function() {
       let a_forms = []
       this.lemmas.forEach((lemma, i) => {
@@ -137,11 +145,6 @@ export default {
     split_inf: function() {
       return this.lemmas[0].split_inf
     }
-  },
-  data: function() {
-    return {
-      menu: false,
-    }
   }
 }
 
@@ -193,14 +196,11 @@ div.lemma {
 .article_header {
   text-decoration: none;
   overflow:auto;
-
   word-wrap: normal;
-  white-space: wrap;
-  overflow: auto;
 }
 
 .long_lemma {
-  font-size: 22px !important;
+  font-size: 60% !important;
 
 }