If there is a lot of text, how do buttons wrap automatically?

[win768]

Self Checks

• [x] I have searched for existing issues search for existing issues, including closed ones.
• [x] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
• [x] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:)
• [x] Please do not modify this template :) and fill in all the required fields.

1. Is this request related to a challenge you're experiencing? Tell me about your story.

After using the following code, if there is too much text, the button will not automatically wrap.

<button data-message="Hello World" data-variant="primary">YOYOYO</button>
<button data-message="Hello World" data-variant="warning">YOYOYO</button>
<button data-message="Hello World" data-variant="secondary">YOYOYO</button>
<button data-message="Hello World" data-variant="secondary-accent">YOYOYO</button>
<button data-message="Hello World" data-variant="ghost">YOYOYO</button>
<button data-message="Hello World" data-variant="ghost-accent">YOYOYO</button>
<button data-message="Hello World" data-variant="tertiary">YOYOYO</button

2. Additional context or comments

No response

3. Can you help us with this feature?

• [ ] I am interested in contributing to this feature.

[dosubot[bot]]

Hello @win768! I'm here to assist you with any bugs, questions, or contributions you may have. Let me know how I can help!

In the Dify codebase, the whitespace-nowrap class is applied to buttons, which prevents text from wrapping within the button ^[1]. To allow text to wrap, you can override this style by removing the whitespace-nowrap class or adding a CSS rule to allow wrapping. Here's an example of how you can modify the CSS to enable text wrapping:

button {
    white-space: normal;
}

This CSS rule will allow the text within the button to wrap when it exceeds the button's width.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[crazywoola]

You can manually truncate the text or change the css of the button.

[LeeeeeeM]

fixed: https://github.com/langgenius/dify/pull/16793 Maybe published in 1.1.4

[gdamao]

className/class/style invalid <button data-message="YOYOYO" data-variant="ghost-accent" className="whitespace-nowrap p-3">YOYOYO</button> <button data-message="YOYOYO" data-variant="ghost-accent" style="white-space: normal;">YOYOYO</button>