如何阻止Vuetify中v-navigation-drawer组件自动截断内部文本？

文本截断是Vuetify内置的v-list-item-title组件默认样式导致，默认开启了溢出省略规则，可通过以下几种方式修改：

• 方法1：使用Vuetify内置工具类（最便捷）
  直接给所有出现截断的v-list-item-title添加text-wrap类名即可，无需额外写自定义样式：

<v-list-item-title class="text-wrap">gobbledygook</v-list-item-title>

该类会自动设置文本自动换行，完整展示所有内容。

• 方法2：自定义样式覆盖（可指定生效范围）
  如果只需要当前导航抽屉内的文本不截断，可以先给v-navigation-drawer添加自定义类名，避免影响全局其他组件：

<v-navigation-drawer 
 dark 
 color="#fff" 
 width="160" 
 v-model="is_drawer" 
 v-if="$vuetify.breakpoint.smAndDown"
 class="custom-drawer"
>

再根据你的Vue版本添加对应样式：

/* Vue2 单文件组件带scoped属性的写法 */
::v-deep .custom-drawer .v-list-item-title {
  white-space: normal; /* 自动换行 */
  overflow: visible;
  text-overflow: unset;
}

/* Vue3 单文件组件带scoped属性的写法 */
:deep(.custom-drawer .v-list-item-title) {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

如果你不希望文本换行，想要超出后横向滚动，调整样式参数即可：

:deep(.custom-drawer .v-list-item-title) {
  white-space: nowrap; /* 强制不换行 */
  overflow-x: auto; /* 横向超出后显示滚动条 */
  text-overflow: unset;
}

• 方法3：调整抽屉宽度
  如果不想换行也不想加滚动条，可以适当调大v-navigation-drawer的width属性值，给文本留出足够的显示空间。

问题示意图：

内容的提问来源于stack exchange，提问作者Lee