<p>I'm using the Vuetify TextField component in a table with many columns. Maybe the component contains too much content to display, and from a user experience perspective inspecting the content by scrolling within the field would take too much time if there are many cells. </p> <p>Pure HTML example</p> <p>Vuetify Example</p> <p>My first thought (if you have a better idea please let me know) is to show a tooltip to show the full content, but this would be annoying if the component is capable of showing the full content. So I only want to show the tooltip when the content is hidden/truncated. </p> <p>So is there a way to know if the component is showing the complete content, or if there is content that is hidden/truncated? (Table performance is important, so I don't know if it's worth doing very complex calculations when values ​​change) </p> <p>I tried</p> <p>(Playground)</p> <pre class="brush:php;toolbar:false;"><script setup> import { ref, watch } from 'vue' const field = ref() const msg = ref( 'Hello World! too much content in this text field component to display.' ) const isCuttingOff = ref(false) watch( msg, () => { const inputWidth = field.value?.clientWidth const inputValueWidth = msg.value.length // !!! measure the input value here !!! console.log({ inputWidth, inputValueWidth }) isCuttingOff.value = inputWidth < inputValueWidth }, { immediate: true } ) </script> <template> <v-app> <div class="text-h3">Is cutting off: {{ isCuttingOff }}</div> <v-container class="w-25"> <v-text-field ref="field" label="fsfdsf" v-model="msg" /> </v-container> </v-app> </template></pre> <p>But</p> <ul> <li>At startup, the variable <code>inputWidth</code> is undefined</li> <li>I don't know how to calculate the variable <code>inputValueWidth</code></li> </ul></p>

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

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