Vuetify v-app-bar-title component is truncated with plenty of room to spare

Question

I am using a navigation bar in my Vue/Vuetify app, and added a v-app-bar-title component to display the name of the page the user is currently on. However, when I load certain pages, the title text becomes truncated, and only corrects itself if I reload the page. Here is an example of what I mean, I added a red border to the element to show that the text should have enough room:

If I reload the page, the tile returns to normal:

I tried adding the text-overflow: show property to the element, but this didn't seem to have any effect. I also added a min-width property, but this failed to change the title's behavior.

EDIT: Including a little extra code:

Here's the title component I'm using:

<v-app-bar-title class="title" >{{ title }}</v-app-bar-title>

And here's the CSS for it:

.title {
  flex-grow: 10;
  color: var(--text-reverse);
  text-overflow: show;
  // border: 1px solid red;
}

I did find a workaround by just replacing the v-app-bar-title component with a span, but that feels cheap and I'd like to be able to utilize as much of vuetify as possible.

Answer 1

Try this... It worked for me

<v-app-bar-title class="title" >
    <div>{{ title }}</div>
</v-app-bar-title>

Answer 2

I found a solution that seemed to work in case it is useful:

<style>
.v-app-bar-title__content{
  width: 200px !important;
}
</style>

Answer 3

try with this

 <v-app-bar-title class="text-no-wrap">{{ title }}</v-app-bar-title>

Answer 4

I had the truncating issue in Safari. Chrome was working fine. I was able to fix by adding class="grow"

<v-app-bar-title class="grow">
  {{ title }}
</v-app-bar-title>