使用 vuetify、flexbox 和列表进行自动换行
Posted
技术标签:
【中文标题】使用 vuetify、flexbox 和列表进行自动换行【英文标题】:Word Wrapping with vuetify, flexbox, and lists 【发布时间】:2020-11-20 11:43:36 【问题描述】:我有一个带有 v-list 的 flexbox。我的问题是 v-list 中有一些文本没有换行。我看到以下内容:
似乎包含列表的部分只是在宽度上无限增长,这就是它不会换行的原因。
我在https://codepen.io/james-hudson3010/pen/GRobYRo 有一个 CodePen,它演示了这个问题。
new Vue(
el: '#app',
vuetify: new Vuetify(),
props:
source: String,
,
data: () => (
selectedItem: null,
flattened: [
'name': 'item 3 title content',
'comment': 'this is a really long comment to see what will happen with the text. I would like this text to wrap, but I am pretty sure it will not do that yet. This is just a test to see what is going to happen as it grows really long. Will this text ever wrap.'
]
),
)
html:
<div id="app">
<v-app id="inspire">
<div class="d-flex flex-row align-stretch" style="width: 100%;">
<div style="background-color: red; width: 500px">
<v-btn class="ma-4">A button</b-btn>
</div>
<v-card style="background-color: lightgreen" style="width: 100%">
<v-list dense flat color="transparent" >
<v-list-item-group v-model="selectedItem">
<v-list-item v-for="item in flattened" :key="item.id">
<v-list-item-content>
<v-list-item-title v-text="item.name"></v-list-item-title>
<v-list-item-subtitle style="overflow-wrap: break-word;" v-text="item.comment"></v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card>
</v-app>
</div>
为了使文本正确换行需要进行哪些更改?
【问题讨论】:
【参考方案1】:添加内置text-wrap
类:
<v-list-item-subtitle class="text-wrap" v-text="item.comment"></v-list-item-subtitle>
【讨论】:
以上是关于使用 vuetify、flexbox 和列表进行自动换行的主要内容,如果未能解决你的问题,请参考以下文章
Vuetify - 如何在自定义文本时包含复选框以进行 v-select