Vuetify TreeView can'；不要使用css中断文本

我似乎不知道如何让下面代码笔中的长文本断开和换行。它离开屏幕，使附加按钮不可点击。我已经尝试了我能想到的所有css规则

行动
新Vue({
el:“#应用程序”，
数据（）{
返回{
项目：空，
项目：[
{
id:0，
儿童：[{
id:1，
名称：“子文本”，
}],
姓名："长篇文本——知识产权是一门学问，是一位杰出的教育精英，他在劳动和社会生活中发挥着重要作用。但在日常生活中，他必须在公共事务中履行劳动义务。在公共事务中，他必须履行职责。他必须履行职责，在公共事务中履行职责当然，这是一种不可轻视的行为，不能因为疏忽而导致动物的死亡。”
},
{
名称：“短文本”
},
]
}
}
})

.v-treeview-node\uu内容，.v-treeview-node\uu标签{
弹性收缩：1；
}
.v-treeview-node__根{
高度：自动；
}

…会解决的

文档：

---

更新的笔：

谢谢，但它看起来仍然溢出到“短文本”上，并溢出到vue卡之外。关于如何修复它，有什么想法吗？@als，我没有在窄屏幕上检查它。现在更新。它需要删除硬编码的高度。

<div id="app">
  <v-modal>
    <v-container class="modal-container">
      <v-card>
  <v-treeview :items="items">
                <template slot="prepend" slot-scope="{ item, open, leaf }">

                </template>
                <template slot="append" slot-scope="{ item, open, leaf }"><v-btn small>Do Action</v-btn></template>
              </v-treeview>
        </v-card>
    </v-container>
  </v-modal>
</div>


new Vue({
  el: '#app',
  data() {
    return {
      item: null,
      items: [
        {
          id: 0,
          children: [{
            id:1,
            name: "Child Text",
          }],
          name: "Long Text - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        },
        {
          name: "Short text"
        },
      ]
    }
  }
})