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

Question

在下面的代码中，按钮应该断开线条并增加其高度。但是文本与横向边界重叠（该行为在下面的 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>

Answer 1

之前没有使用过 Vuetify，我只能提供一个基本的解决方案（也就是说，我确实浏览了文档并找不到任何东西）......似乎.v-btn__content生成的选择器已white-space: nowrap应用于它。因此，您可以做的是添加一个元素来包含覆盖其父样式的文本：

        <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 高度。