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

【问题标题】：How to split vuetify-text-field-label over 2 lines如何将 vuetify-text-field-label 拆分为 2 行
【发布时间】：2021-07-26 13:46:39
【问题描述】：

我有一个 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>

【问题讨论】：

标签： javascript css vue.js

【解决方案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>

【讨论】：

【解决方案2】：

如果需要信息，我会使用hint。 Google material design 建议多行或长标签是不好的做法：

【讨论】：

提示中是否可以有超链接（a-anchor）？
@nurdunertu，不，只有字符串值。它没有插槽。为什么需要展示锚点？