Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Impossible to add word-wrap to menu title; white-space: normal has no effect #38918

Open
GeorgeFlorian opened this issue Nov 23, 2022 · 4 comments
Assignees
Labels
help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. Inactive

Comments

@GeorgeFlorian
Copy link

Reproduction link

Edit on CodeSandbox

Steps to reproduce

Create a horizontal menu
Try to add word wrap to title text

What is expected?

When the menu width is smaller than the menu title I would like the title to wrap not to disappear and display the EllipsisOutlined icon.

What is actually happening?

When the menu width is smaller than the menu title the title is replaced by the EllipsisOutlined icon.

Environment Info
antd 4.23.4
React 18.1.0
System Ubuntu 20.04.5 LTS
Browser Version 107.0.5304.110 (Official Build) (64-bit)
@afc163
Copy link
Member

afc163 commented Nov 27, 2022

Could you send a PR to rc-menu just like this closed PR? react-component/menu#266

@afc163 afc163 added the help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. label Nov 27, 2022
@github-actions
Copy link
Contributor

Hello @GeorgeFlorian. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @GeorgeFlorian,我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支(新特性发到 feature 分支,其他发到 master 分支),务必填写 Pull Request 内的预设模板,提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献。

giphy

@RedJue
Copy link
Member

RedJue commented Feb 5, 2023

Let me try

@RedJue
Copy link
Member

RedJue commented Feb 15, 2023

You can add disabledOverflow property to the menu component to solve this problem.Note that this property is still experimental and not the official recommended solution, but it will solve the problem you are currently experiencing.

The fix repo is here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. Inactive
Projects
None yet
Development

No branches or pull requests

3 participants