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

Question

我正在尝试将文本设置在 vuetify 芯片内的两行不同的行中，但我尝试了几种不同的方法。即使为文本的每个部分设置自己的行，但它似乎仍然在同一行。关于如何解决它的任何想法？

这是一个示例pen

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({
  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>