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

【问题标题】：Vuetify v-app-bar-title component is truncated with plenty of room to spareVuetify v-app-bar-title 组件被截断，留出足够的空间
【发布时间】：2021-06-10 21:36:00
【问题描述】：

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

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

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

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

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

&lt;v-app-bar-title class="title" &gt;{{ title }}&lt;/v-app-bar-title&gt;

这是它的 CSS：

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

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

【问题讨论】：

我看到了同样的行为。它也是一个简单的应用栏标题。我还包括了一个垫片和一个图标，所以我认为这可能是由这个引起的。但也只有文本元素位于尖括号内，文本在重新加载后第一次访问网站时会被剪切，它会完美显示。我不知道为什么以及如何解决它。 :-(
@KenJiiii 同样在这里它没有意义为什么它的行为方式

标签： vue.js vue-component vuetify.js

【解决方案1】：

试试这个

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

【讨论】：

【解决方案2】：

我找到了一个似乎有用的解决方案：

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

【讨论】：

【解决方案3】：

很好的问题。能否分享一下你的 app-bar 组件的代码，让我们看看？

更新：

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

可能的修复，我从来没有在 Vuetify 组件上更改 flex-grow。你试过去掉 flex-grow 吗？

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

  text-overflow: clip;
  overflow: visible;

【讨论】：

这不是一个好问题的好答案。因此，请使用评论部分。
嗨 Jens，请查看我发布的带有相关代码的编辑！

【解决方案4】：

试试这个...它对我有用

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

【讨论】：

【解决方案5】：

我们可以使用 v-toolbar-title 组件。这对我有用！

Example for toolbar title

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review