Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

425
Views
Long text in v-autocomplete

I need the v-autocomplete component to show the full text of the selected element.

In the selection it appears correctly:

But once selected it is shown like this, I don't know that the full text does not appear:

over 4 years ago · Santiago Trujillo
1 answers
Answer question

0

Solution 1

Maybe you want to use the selection slot of the v-autocomplete and split your value into parts for better reading.

<v-autocomplete
  v-model="value"
  :items="items"
  dense
  filled
  label="Filled"
>
  <template v-slot:selection="{ item }">
    <div class="d-flex flex-column"> 
      <span>First</span> <!-- or e.g. item.fullname -->
      <span>Second</span> <!-- or e.g. item.address -->
    </div>
  </template>
</v-autocomplete>

Will result in: enter image description here

Solution 2

Or you could use word-break: break-all; like

.v-autocomplete .v-select__selections {
  word-break: break-all;
}
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!