如何防止 v-navigation-drawer 在 Vuetify 上缩短文本？答案

【问题标题】：How can I prevent v-navigation-drawer from shortening texts inside on Vuetify?如何防止 v-navigation-drawer 在 Vuetify 上缩短文本？
【发布时间】：2021-10-23 20:43:24
【问题描述】：

我一直在寻找一种方法来防止 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>

【问题讨论】：

请分享代码
@BoussadjraBrahim 在这里 :)

标签： vue.js frameworks frontend vuetify.js

【解决方案1】：

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

为了允许长文本换行，还有另一个帮助类 text-wrap。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：