如何实现Vuetify v-text-field组件标签自动换行显示为两行

Vuetify 原生 v-text-field 组件的标签默认采用单行截断展示规则，在移动端宽度有限的场景下，过长的标签文本无法完整显示，可通过自定义标签插槽的方式实现自动换行效果：

• 通过 v-slot:label 插槽覆写默认标签渲染内容
• 使用 div、p 等块级元素包裹文本，块级元素默认支持自动换行，也可手动拆分多段文本实现强制换行

手动分段换行示例代码：

<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-text-field>
          <template v-slot:label>
            <div><p>第一行标签文本</p></div>
            <div><p>第二行标签文本</p></div>
          </template>
        </v-text-field>
      </v-container>
    </v-form>
  </v-app>
</div>

无需手动分段、超长自动折行示例代码：

<v-text-field>
  <template v-slot:label>
    <div style="width: 100%; white-space: normal; line-height: 1.4;">
      这是一段很长的标签文本，在移动端宽度不足时会自动折行显示，不会出现内容截断的问题
    </div>
  </template>
</v-text-field>

内容的提问来源于stack exchange，提问作者nurdunertu