如何在Vue.js中设置多行标题v-toolbar？

Question

我正在使用 Vuetify 库在 Vue.js 中创建应用程序。在应用程序中，我正在显示 v-cards，其标题长度不同。我的问题是我想根据需要在尽可能多的行中显示所有标题。相反，标题中断了，只有一行“...”。怎么改？

模板：

<v-card max-width="900" class="mb-6">
  <v-toolbar flat color="grey darken-2" dark>
    <v-toolbar-title align="left">
      {{ labels[0].key }}
    </v-toolbar-title>
  </v-toolbar>
  <v-card-text>
    <v-text-field
      color="grey"
      v-model="labels[0].translation"
      label="Translation"
    >
    </v-text-field>
  </v-card-text>
</v-card>

使用后：

style="overflow: visible"

显示所有文本，但仍不是多行。

编辑：

使用 p 而不是 v-toolbar-title 后：

Answer 1

我不认为这是可能的...我通过 Vuetify 搜索...您可以将其更改为普通 p 元素而不是 v-toolbar-title

Answer 2

我认为在这种情况下您最好完全不使用工具栏 - 它被设计为具有一组固定高度（这就是为什么它具有短、突出和扩展的道具）。您有多种选择，但这可能是最简单的：

<v-card max-width="900" class="mb-6">
  <v-card-title color="grey darken-2 white--text">
      {{ labels[0].key }}
  </v-card-title>
  <v-card-text>
    <v-text-field
      color="grey"
      v-model="labels[0].translation"
      label="Translation"
    >
    </v-text-field>
  </v-card-text>
</v-card>

如果您特别需要 dark 道具，您可以将标题包裹在 v-sheet 中：

<v-card max-width="900" class="mb-6">
  <v-sheet dark>
    <v-card-title>
      {{ labels[0].key }}
    </v-card-title>
  </v-sheet>
  <v-card-text>
    <v-text-field
      color="grey"
      v-model="labels[0].translation"
      label="Translation"
    >
    </v-text-field>
  </v-card-text>
</v-card>

https://codepen.io/thomaskuhlmann/pen/rNyLXxL

如何在Vue.js中设置多行标题v-toolbar？

How to set multiline title v-toolbar in Vue.js?

vue.js

vuetify.js

title

multiline

card