CODEWITHSUNDEEP
cssreactjsantd
Tiago Wippel
Tiago Wippel

Reputation: 53

Antd word-wrap in Menu.Item

it is possible to apply word-wrap in a Menu.Item component ?

example not working: https://codepen.io/tiagowippel/pen/LYEKYbb?editable=true&editors=001

 <Menu.Item key="1">Option 1Option 1Option 1Option 1Option 1Option 1Option 1Option 1</Menu.Item>

Upvotes: 3

Views: 4431

Answers (2)

TBouder
TBouder

Reputation: 2719

You can set some style to your Menu.Item : 

<Menu.Item key="1" style={{whiteSpace: 'normal', height: 'auto'}}>Option 1Option 1Option 1Option 1Option 1Option 1Option 1Option 1</Menu.Item>

Upvotes: 6

Gerard
Gerard

Reputation: 801

The default CSS you're importing from Ant is set to truncate. You'll want to change the white-space property:

white-space: normal;

You may then notice that the wrapped text is overflowing in the y axis now. You can change your height to accommodate variable height content:

height: auto;

Upvotes: 8

Related Questions