# Perspective Dropdown - Use Word Wrap on Options with long label texts **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective\ **Created:** [March 31, 2022, 6:51pm UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-use-word-wrap-on-options-with-long-label-texts/57893 "2022-03-31T18:51:53Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![dustin.cooper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dustin.cooper/32/29963_2.png) [@dustin.cooper](https://forum.inductiveautomation.com/u/dustin.cooper)\ **Post date:** [March 31, 2022, 6:51pm UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-use-word-wrap-on-options-with-long-label-texts/57893/1 "2022-03-31T18:51:53Z")
Using Ignition 8.1.14 I’m hoping that one of the CSS gurus on here can help me accomplish what I’m trying to do. None of the built-in properties of the dropdown component do what I’m after (ie `props.dropdownOptionStyle.overflowWrap` or `wordWrap`) What I’d like to achieve is for individual dropdown options to wrap the text of the option.label (grow vertically) rather than truncate the text. Current behavior: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/6/a6a9922fbbf39b762b6d68874541d1bc7d954250.png) Desired behavior: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/4/34672bb53e4bacec2b27e18a522ff415f7cd7489.png) Is such a thing possible with Perspective? ---
**Author:** ![Matthew.gaitan](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@Matthew.gaitan](https://forum.inductiveautomation.com/u/Matthew.gaitan)\ **Post date:** [March 31, 2022, 7:05pm UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-use-word-wrap-on-options-with-long-label-texts/57893/2 "2022-03-31T19:05:40Z")
![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/3/234431ab2b070616a4b81f1af86d25530111b151.png) Under `dropdownOptionsStyle` you need `{ "classes": "", "overflowWrap": "break-word", "whiteSpace": "normal" }` ---
**Author:** ![dustin.cooper](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dustin.cooper/32/29963_2.png) [@dustin.cooper](https://forum.inductiveautomation.com/u/dustin.cooper)\ **Post date:** [March 31, 2022, 7:09pm UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-use-word-wrap-on-options-with-long-label-texts/57893/3 "2022-03-31T19:09:07Z")
@Matthew.gaitan Thanks! The `"whiteSpace": "normal"` was what I was missing. Bonus point for no css required! 😀 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/9/390c157526a9fb7d979eb54f0014301c71a16afd.png) ---
**Author:** ![Matthew.gaitan](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@Matthew.gaitan](https://forum.inductiveautomation.com/u/Matthew.gaitan)\ **Post date:** [March 31, 2022, 7:12pm UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-use-word-wrap-on-options-with-long-label-texts/57893/4 "2022-03-31T19:12:17Z")
haha yeah, if i can’t easily do something in the designer I normally can’t be bothered to mess with the overriding the theme files to do some of this stuff ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [March 31, 2022, 7:40pm UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-use-word-wrap-on-options-with-long-label-texts/57893/5 "2022-03-31T19:40:36Z")
> [@dustin.cooper](#): > > Bonus point for no css required! Officially it is CSS, just happens that it's editable from the designer. Great solution either way. ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [April 1, 2022, 10:12am UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-use-word-wrap-on-options-with-long-label-texts/57893/6 "2022-04-01T10:12:58Z")
> [@Matthew.gaitan](#): > > Under `dropdownOptionsStyle` you need `{ "classes": "", "overflowWrap": "break-word", "whiteSpace": "normal" }` If anyone would prefer this to be the default on all dropdown (tbh I am not sure why you wouldn't want it to be the default in my opinion) here is the CSS you need. Note, these have to be `!important` or the built in classes overwrite this. ```auto .iaDropdownCommon_option { overflow-wrap: break-word !important; white-space: normal !important; } ``` P.S. It is a huge PITA getting the html for the dropdown options out of the modal wrapper since every time you click the HTML in the page it closes the options... ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [April 1, 2022, 12:07pm UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-use-word-wrap-on-options-with-long-label-texts/57893/7 "2022-04-01T12:07:41Z")
> [@kgamble](#): > > P.S. It is a huge PITA getting the html for the dropdown options out of the modal wrapper since every time you click the HTML in the page it closes the options… You can say that again! ---
**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\ **Post date:** [April 1, 2022, 3:15pm UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-use-word-wrap-on-options-with-long-label-texts/57893/8 "2022-04-01T15:15:23Z")
For accessing the dropdown without having it close, open the console in the browser developer tools and enter the following: `setTimeout(function(){debugger;}, 5000)` And then press enter. Then, on your page, select whatever dropdown you want to spawn the options and then wait. The above code will break into the debugger after 5 seconds, freezing the associated webpage. You are then free to browse the HTML at your leisure. This is what I used when I was trying to increase the vertical size of items in a dropdown and was trying to determine what classes to override ---
**Author:** ![tmahaf](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tmahaf/32/23492_2.png) [@tmahaf](https://forum.inductiveautomation.com/u/tmahaf)\ **Post date:** [December 23, 2023, 2:41pm UTC](https://forum.inductiveautomation.com/t/perspective-dropdown-use-word-wrap-on-options-with-long-label-texts/57893/9 "2023-12-23T14:41:27Z")
Anyone here know the trick to get these dropdowns to wrap their values? The solution here is for options. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/4/440b091b37c7b0be6a5e908460680da16d3e8ca3.png) Me need wrappy