Vuetify v-app-bar-title 组件被截断，留出足够的空间

Question

我在我的 Vue/Vuetify 应用程序中使用导航栏，并添加了一个v-app-bar-title组件来显示用户当前所在页面的名称。但是，当我加载某些页面时，标题文本会被截断，并且只有在我重新加载页面时才会自行更正。这是我的意思的一个例子，我在元素中添加了一个红色边框以表明文本应该有足够的空间：

如果我重新加载页面，磁贴会恢复正常：

我尝试将text-overflow: show属性添加到元素，但这似乎没有任何效果。我还添加了一个min-width属性，但这未能改变标题的行为。

编辑：包括一些额外的代码：

这是我正在使用的标题组件：

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

这是它的 CSS：

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

我确实通过v-app-bar-title用 a替换组件找到了一种解决方法span，但这感觉很便宜，我希望能够尽可能多地利用 vuetify。

Answer 1

尝试用这个

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

Answer 2

很好的问题。您能否分享一下您的应用栏组件的代码，以便我们看看？

更新：

你的 v-app-bar-title 是直接在 v-app-bar 中吗？

可能的修复，我从来没有必要改变 Vuetify 组件上的 flex-grow 。您是否尝试过删除 flex-grow ？

另外你可以尝试在你的CSS标题类中：

  text-overflow: clip;
  overflow: visible;