如何防止Vuetify中v-alert内v-list内容水平溢出，实现文本省略或换行

失效原因 #

你写的.prevent-overflow类没有生效，是因为Vuetify的v-list、v-list-item、v-list-item__content组件默认采用flex布局，flex子元素默认min-width: auto，会被内部文本内容撑开宽度，不会继承父级v-alert的宽度限制，最终导致内容溢出。

方案1：实现文本截断+末尾省略号效果 #

按如下方式修改CSS即可：

/* 限制列表宽度不超过父级v-alert */
.v-alert .v-list {
  width: 100%;
}

/* 给列表项内容容器添加宽度限制，覆盖flex默认的min-width: auto */
.v-list-item__content {
  min-width: 0;
  width: 100%;
}

.prevent-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

之后给v-list-item-title元素绑定prevent-overflow类即可生效。

方案2：实现文本自动换行效果 #

如果不需要省略号，希望文本在alert内部完整换行展示，使用如下CSS：

.v-alert .v-list {
  width: 100%;
}

.prevent-overflow {
  white-space: normal;
  word-wrap: break-word;
}

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