如何创建具有多行文本的离子按钮，在离子V6/V5中包装文本

发布于 2025-02-14 02:16:29 字数 379 浏览 0 评论 0 原文

我遇到了一个问题，创建一个带有离子V6/V5中多行文本的离子按钮，问题是整个文本都出现在一行中，并且没有显示部分文本。就像

 <ion-button expand="block" size="large">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ion-button>

原文

I had a problem creating an ionic-button with multi-line text in ionic v6/v5, the problem was that the whole text was appearing in one line and part of the text was not shown. like the example in the stackblitz

 <ion-button expand="block" size="large">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ion-button>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

像你 2025-02-21 02:16:29

因此，基本上，修复程序是添加类 ion-text-wrap ，如下所示，来自文档：

<ion-button class="ion-text-wrap" expand="block">__LONG_TEXT__</ion-button>

这将增加按钮的高度，并在文本周围进行按钮包裹。在该措辞中明确搜索时，我在文档中没有发现这一点。
该示例还添加在

so basically the fix was adding the class ion-text-wrap, that goes as below ,from documentation:

<ion-button class="ion-text-wrap" expand="block">__LONG_TEXT__</ion-button>

this would increase the height of the button and make the button wrap around the text. I did not find that in the documentation while searching explicitly in that wording.
The example also added in the stackblitz

回复收藏 0 原文

~没有更多了~