Vuetify v-app-bar-title组件被截断，有足够的空间可供使用

qyuhtwio 于 2022-11-17 发布在 Vue.js

关注(0)|答案(9)|浏览(108)

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

如果我重新载入页面，互动程序会恢复正常：

我尝试在元素中添加text-overflow: show属性，但似乎没有任何效果。我还添加了一个min-width属性，但未能改变标题的行为。
编辑：包括一点额外的代码：
下面是我使用的title组件：

<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;
}

我确实找到了一个变通办法，就是用span替换v-app-bar-title组件，但这感觉很便宜，我希望能够尽可能多地利用vuetify。

vue.js

来源：https://stackoverflow.com/questions/66607167/vuetify-v-app-bar-title-component-is-truncated-with-plenty-of-room-to-spare

9条答案

按热度按时间

zaq34kh61#

试试这个

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

赞(0）回复(0）举报 2022-11-17

vpfxa7rd2#

我发现了一个解决方案，似乎工作的情况下，它是有用的：

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

赞(0）回复(0）举报 2022-11-17

rsl1atfo3#

试试这个...对我有用

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

赞(0）回复(0）举报 2022-11-17

cgvd09ve4#

我在Safari中遇到了截断问题。Chrome工作正常。我能够通过添加class="grow"来修复

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

赞(0）回复(0）举报 2022-11-17

6ovsh4lw5#

问得好。你能分享一下你的应用栏组件的代码吗？
更新：
您的虚拟应用栏标题是否直接位于虚拟应用栏中？
可能的修复，我从来没有改变过Vuetify组件上的flex-grow。你试过删除flex-grow吗？
此外，您可以在css title类中尝试：

text-overflow: clip;
  overflow: visible;

赞(0）回复(0）举报 2022-11-17

mkh04yzy6#

如果你想在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>

赞(0）回复(0）举报 2022-11-17

ny6fqffe7#

也有同样的问题。
已修复

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

赞(0）回复(0）举报 2022-11-17

q8l4jmvw8#

我遇到了同样的问题，不想使用!important。所以我用v-toolbar-title替换了v-app-bar-title，不再有截断问题：）

赞(0）回复(0）举报 2022-11-17

lh80um4z9#

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

赞(0）回复(0）举报 2022-11-17

我来回答

Vuetify v-app-bar-title组件被截断，有足够的空间可供使用

9条答案

相关问题

热门标签

最新问答