javascript - 如何将 vuetify-text-field-label 拆分为 2 行

Question

我有一个 vuetify 文本字段。标签对于移动设备来说太长。是否可以自动换行文本。我尝试使用 div 和 p，就像这样(链接在 codepen 上)

<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-text-field>
          <template v-slot:label>
            <div><p>First line of text.</p></div><div><p>Second line of text</p></div>
          </template>
        </v-text-field>
      </v-container>
    </v-form>
  </v-app>
</div>

Answer 1

您可以使用 <span>带有 display: inline-block 的元素.

@keyframes example {
  0% {width: 310px;}
  50% {width: 290px;}
  100% {width: 310px;}
}

#wrapper {
  word-wrap: normal;
  padding: 0 10px;
  border: 1px solid #ccc;
  animation-name: example;
  animation-duration: 5s;
    animation-timing-function: sine;
    animation-iteration-count: infinite;
}

.sentence {
  display: inline-block;
}

<div id="wrapper">
  <p><span class="sentence">First line of text.</span> <span class="sentence">Second line of text.</span></p>
</div>