vuetify, flexbox 및 목록을 사용한 단어 배치

질문

v-list가있는 flexbox가 있습니다. 내 문제는 v-list에 래핑되지 않은 텍스트가 있다는 것입니다. 나는 다음을 본다 :

목록을 포함하는 부분이 너비가 제한되지 않고 커지므로 래핑되지 않습니다.

https://codepen.io/james-hudson3010/pen/GRobYRo문제를보여줍니다.

자바스크립트 :

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 class를 추가합니다.

 <v-list-item-subtitle class="text-wrap" v-text="item.comment"></v-list-item-subtitle>

 

 

 

 

출처 : https://stackoverflow.com/questions/63178080/word-wrapping-with-vuetify-flexbox-and-lists