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

组件替换为

span

，但这感觉很便宜，而且我希望能够尽可能多地利用 vuetify。

Answer 1

试试这个

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

Answer 2

我找到了一个似乎可行的解决方案，以防万一它有用：

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

Answer 3

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

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

Answer 4

我在 Safari 中遇到了截断问题。 Chrome 运行良好。我可以通过添加

class="grow"

来修复

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

Answer 5

我有同样的问题，但不想使用

!important

。所以我刚刚将

v-app-bar-title

替换为

v-toolbar-title

并且不再有此截断问题:)

Answer 6

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

更新：

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

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

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

  text-overflow: clip;
  overflow: visible;

Answer 7

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

工具栏标题示例

Answer 8

如果你想在 v-app-bar-titles 之间添加空间，那么添加边距是我在这里得到的最好的方法

<v-app-bar-title style="color:white" class="title">
        Title here
 </v-app-bar-title>
 <v-app-bar-title style="color:white " class="little ml-4">
 </v-app-bar-title>

Answer 9

有同样的问题。

解决了这个问题

<style>
  v-app-bar-title__placeholder {
    text-overflow: clip;
  }
</style>

Answer 10

如果您显示占位符并隐藏

v-app-bar-title

中的内容，它似乎可以工作。

.v-app-bar-title__placeholder {
  visibility: visible !important;
}
.v-app-bar-title__content {
  visibility: hidden !important;
}

Answer 11

如果您使用 Vuetify 3，这个解决方案对我有用：

.v-toolbar-title__placeholder{
  width: 200px !important;
}

Answer 12

如果查看生成的 HTML，在标签之间放置任何内容，即

<v-app-bar-title> text </v-app-bar-title>

都将呈现在具有

v-app-bar-title__content

类的嵌套 div 中。嵌套内容具有默认宽度，会截断文本。

但是，如果使用

v-text

选项来渲染内容，则不会使用嵌套的 div，即

<v-app-bar-title v-text="text" />

。

另一种选择是使用

<v-toolbar-title>

代替，其工作方式类似，但允许这种格式

<v-toolbar-title> text </v-toolbar-title>

。