[Vuejs]-How to check if input field is large enough to display full content?

by

1👍

✅

I managed to compare textbox’s clientWidth with its scrollWidth by modifying your code as below.

1- Got rid of field ref.

2- Gave v-text-field an id

3- added a check function and called it in watch callback function

4- inside check I checked input’s clientWidth and scrollWidth

5- To get it to run in the initial load, I assigned an empty string to msg and changed it to the original string at the bottom of the script.

Check it here

<script setup>
  import { ref, watch } from 'vue'

  const msg = ref("")

  const isCuttingOff = ref(false)

  function check() {
    const elm = document.querySelector('#txt')
    isCuttingOff.value = elm.clientWidth < elm.scrollWidth;
    // todo : custom tooltip or any other solution for long texts
  }

  watch(
    msg,
    (currentMsg, oldMessage, callback) => {
      callback(check)
    },
    { immediate: true }
  )

  msg.value =
    'Hello World! too much content in this text cfield component to display.'
</script>
<script></script>
<template>
  <v-app>
    <div class="text-h3">Is cutting off: {{ isCuttingOff }}</div>
    <v-container class="w-25">
      <v-text-field id="txt" v-model="msg" />
    </v-container>
  </v-app>
</template>
👤mohsen dorparasti

0👍

You just need title attribute and little css

Using css to display the overflow of text like …. (ellipsis) and title attribute is used to show the full content on hover like popup

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World! too much content in this text field component to display')
</script>

<template>
  <h1 :title=msg>{{ msg }}</h1>
  <input v-model="msg">
</template>

<style>
  h1{
    max-width: 15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
👤Yuvaraj M

Leave a comment