在下面的代码中,按钮应该换行并增加其高度。但是文本与横向边框重叠(该行为在下面的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>
x6492ojm1#
由于以前没有使用过Vuetify,我只能提供一个基本的解决方案(也就是说,我确实浏览了文档,但什么也找不到)......生成的.v-btn__content选择器似乎应用了一个white-space: nowrap。因此,您可以添加一个元素来包含您的文本,覆盖其父元素的样式:
.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>
如果仍然太小,你可能需要调整垂直按钮的高度。
ee7vknir2#
试试看:
<v-btn block outline > <p class="text-wrap" style="width: min-content; margin: auto;"> Crear Contraseña</p> </v-btn>
ebdffaop3#
在当前的Vuetify 2.6.0+中,多行按钮可以以稍微不同的方式完成。由于某些原因,您无法覆盖default槽中的<span class="v-btn__content">标记。不幸的是,您的自定义内容被 Package 在此标记中,生成的HTML将如下所示:
default
<span class="v-btn__content">
但您可以通过以下方式解决问题:
<v-btn class="btn-multiline" width="150" height="50" > <span class="text-wrap">Multiline Button Text</span> </v-btn> ... <style> .btn-multiline > span { width: 100% } </style>
因此,您只需要定义自定义全局.btn-multiline类,将全宽设置为<span class="v-btn__content">标签,并应用展开到white-space: normal的内部Vuetify text-wrap类。您可以尝试此解决方案at CodePen。
.btn-multiline
white-space: normal
text-wrap
11dmarpk4#
这里没有内联样式
<v-btn block color="blue" large class="no-text-transform pa-10" @click="reviewing" > <p class="text-wrap ma-auto"> long text here </p> </v-btn>
4条答案
按热度按时间x6492ojm1#
由于以前没有使用过Vuetify,我只能提供一个基本的解决方案(也就是说,我确实浏览了文档,但什么也找不到)......生成的
.v-btn__content
选择器似乎应用了一个white-space: nowrap
。因此,您可以添加一个元素来包含您的文本,覆盖其父元素的样式:如果仍然太小,你可能需要调整垂直按钮的高度。
ee7vknir2#
试试看:
ebdffaop3#
在当前的Vuetify 2.6.0+中,多行按钮可以以稍微不同的方式完成。
由于某些原因,您无法覆盖
default
槽中的<span class="v-btn__content">
标记。不幸的是,您的自定义内容被 Package 在此标记中,生成的HTML将如下所示:但您可以通过以下方式解决问题:
因此,您只需要定义自定义全局
.btn-multiline
类,将全宽设置为<span class="v-btn__content">
标签,并应用展开到white-space: normal
的内部Vuetifytext-wrap
类。您可以尝试此解决方案at CodePen。
11dmarpk4#
这里没有内联样式