Vuetify - v-btn（按钮）的标签与横向边界重叠

Posted 2023-02-22

【中文标题】Vuetify - v-btn（按钮）的标签与横向边界重叠

【英文标题】：Vuetify - label of v-btn (button) overlaps the lateral borders

【发布时间】：2019-01-13 17:59:41

【问题描述】：

在下面的代码中，按钮应该换行并增加其高度。 但是文本与横向边界重叠（行为在下面的 Codepen 链接中重现）。

如何解决？

Codepen

<v-btn  block outline color="indigo" class="no-text-transform">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dapibus augue.
</v-btn>

【参考方案1】：

之前没有使用过 Vuetify，我只能提供一个基本的解决方案（也就是说，我确实查看了文档但找不到任何东西）......看起来生成的 .v-btn__content 选择器有一个 @987654322 @ 应用于它。所以你可以做的是添加一个元素来包含覆盖其父样式的文本：

        <v-btn  block outline color="indigo" class="no-text-transform">
          <span style="white-space: normal;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dapibus augue.
          </span>
        </v-btn>

如果仍然太小，您可能需要调整 v-btn 高度。

【参考方案2】：

试试：

    <v-btn
      block
      outline
      >
    <p class="text-wrap" style="width: min-content; margin: auto;">
    Crear Contraseña</p>
    </v-btn>