如何在 Vuetify 芯片内的下一行设置文本？

Question

我正在尝试将文本设置在 vuetify 芯片内的两行不同的行中，但我尝试了几种不同的方法。即使为文本的每个部分设置自己的行，但它似乎仍然在同一行。关于如何修复它有什么想法吗？这是一支样品笔new Vue({  el: "#app",  data() {    return {};  }});<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" /><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" /><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script><div id="app">  <v-app id="inspire">    <v-container>      <v-layout>        <v-flex xs5>          <v-chip close>            <v-layout>              Hello !!            </v-layout>            <v-layout>              <div> There </div>            </v-layout>          </v-chip>        </v-flex>      </v-layout>    </v-container>  </v-app></div>所以基本上 Hello 和 There 应该在下一行！谢谢

Answer 1

您尝试过简单的<br/>标签吗？

new Vue({

  el: "#app",

  data() {

    return {};

  }

});

.v-chip .v-chip__content {

  height: auto !important;

}

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>

<div id="app">

  <v-app id="inspire">

    <v-container>

      <v-layout xs4>

        <v-chip close>

          Hello !!<br/> There

        </v-chip>

      </v-layout>

    </v-container>

  </v-app>

</div>