如何修改Nuxt项目中Vuetify的v-text-field组件标签字体大小并解决文字截断问题

问题根因 #

Vuetify 内置的文本框标签外层容器默认设置了固定高度、行高和溢出隐藏规则，仅修改插槽内 span 的字体大小，外层容器没有同步适配尺寸，就会出现文字被截断的问题。

解决方案 #

给目标文本框添加自定义类名，通过深度选择器修改 Vuetify 内部标签容器的限制规则即可，完整代码如下：

<template>
<v-text-field
  color="var(--color4)"
  class="px-15 custom-text-field"
>
  <template v-slot:label>
      <span class="labelClass">
          请输入你的姓名
      </span>
  </template>
</v-text-field>
</template>

<style scoped>
.labelClass {
  font-size: 1.8rem;
}
/* 穿透修改Vuetify内部标签容器的样式限制 */
:deep(.custom-text-field .v-label) {
  height: auto !important;
  line-height: normal !important;
  overflow: visible !important;
}
/* 可选：调整聚焦/有输入内容时，标签上浮的位置，可根据实际显示效果调整Y轴偏移值 */
:deep(.custom-text-field .v-label--floating) {
  transform: translateY(-22px) scale(0.75) !important;
}
</style>

补充说明 #

• 自定义类名custom-text-field用来限定样式作用范围，避免影响项目内其他全局文本框的样式
• 如果你使用的是Vue2版本，将样式中的:deep()替换为::v-deep或者/deep/即可生效
• 如果调整后文本框整体高度不匹配，可额外给custom-text-field添加min-height属性自行适配

内容的提问来源于stack exchange，提问作者hamid-davodi