如何在vue-material列表中实现文本换行而非溢出省略？

嘿，我来帮你搞定这个问题！你遇到的scoped样式不生效的核心原因是：Vue的scoped样式会给当前组件的元素加上唯一的作用域属性，而<div class="md-list-item-text">是Material组件库内部的元素，你的scoped样式默认无法渗透进去。加上默认的white-space: nowrap和text-overflow: ellipsis限制，就导致文本被截断了。

具体解决方案 #

根据你使用的Vue版本，选择对应的深度选择器来突破作用域限制，同时调整文本换行的相关样式：

如果你用的是Vue 2

在组件的scoped样式中添加：

<style scoped>
/deep/ .md-list-item-text p {
  white-space: normal; /* 允许文本自动换行 */
  text-overflow: unset; /* 移除省略号效果 */
  overflow: visible; /* 让超出内容完整显示 */
}
</style>

如果你用的是Vue 3

Vue 3推荐使用:deep()选择器，替换上面的代码：

<style scoped>
:deep(.md-list-item-text p) {
  white-space: normal;
  text-overflow: unset;
  overflow: visible;
}
</style>

关键原理拆解 #

• white-space: normal：这是解决换行问题的核心，默认的white-space: nowrap会强制文本不换行，正是触发省略号的根源，改成normal就能让文本自动换行。
• 深度选择器（/deep/或:deep()）：让你的scoped样式能够作用到Material组件库的内部元素上，突破Vue的作用域限制。

完整组件代码示例 #

<template>
  <md-list-item>
    <md-icon v-bind:style="{color: transcript.color}">account_circle</md-icon>
    <div class="md-list-item-text">
      <p>{{ transcript.text }}</p>
    </div>
    <md-button class="md-icon-button md-list-action">
      <small>some stuff</small>
    </md-button>
  </md-list-item>
</template>

<style scoped>
/* 这里根据你的Vue版本选择对应的写法 */
/deep/ .md-list-item-text p {
  white-space: normal;
  text-overflow: unset;
  overflow: visible;
}
</style>

这样修改后，你的transcript.text内容就会自动换行，完整显示成多行啦！

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