如何防止 v-navigation-drawer 缩短 Vuetify 中的文本？

Question

我一直在寻找一种方法来防止 v-navigation-drawer 在 Vuetify 上自行缩短文本。当我在 v-navigation-drawer 中用文本填充一些空间时，文本就像“狼吞虎咽......”。我的意思是，我希望里面的标签能够流畅地显示诸如“gobbledygook”之类的文本。我怎样才能做到这一点？我希望下面的图片能帮助你到底是什么问题。

问题：我不希望 v-navigation-drawer 缩短其内部的文本。

编辑：代码如下：

<v-navigation-drawer 
 dark 
 color="#fff" 
 width="160" 
 v-model="is_drawer" 
 v-if="$vuetify.breakpoint.smAndDown">
 // many <v-list-item> and <v-list-group> inside here
 // and shrinking-text problem occurs on v-list-item-title
</v-navigation-drawer>

Answer 1

问题出在列表标题项目标题中，要解决此问题，请添加以下 CSS 规则：

.v-list-item__subtitle, .v-list-item__title{
      text-overflow: initial!important;
    white-space: initial!important;
}

Answer 2

当文本长度过长时，列表项文本会自动截断。虽然没有内置的方法来禁用文本截断，但可以通过在 v-list-item-title 上使用 class d-flex 来禁用它，因为文本截断需要显示块。

为了让长文本换行，还有另一个助手class text-wrap。

查看此代码框，其中包含所有选项：https://codesandbox.io/s/hungry-voice-bbxtg?file=/src/components/HelloWorld.vue

如何防止 v-navigation-drawer 缩短 Vuetify 中的文本？

How can I prevent v-navigation-drawer from shortening texts inside on Vuetify?

frontend

frameworks

vue.js

vuetify.js