如何在 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>

Answer 1

你试过一个简单的<br/>标签吗？new Vue({&nbsp; el: "#app",&nbsp; data() {&nbsp; &nbsp; return {};&nbsp; }});.v-chip .v-chip__content {&nbsp; 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">&nbsp; <v-app id="inspire">&nbsp; &nbsp; <v-container>&nbsp; &nbsp; &nbsp; <v-layout xs4>&nbsp; &nbsp; &nbsp; &nbsp; <v-chip close>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Hello !!<br/> There&nbsp; &nbsp; &nbsp; &nbsp; </v-chip>&nbsp; &nbsp; &nbsp; </v-layout>&nbsp; &nbsp; </v-container>&nbsp; </v-app></div>