How can I display more than one blank space in material UI select?

Question

I'm using material UI select but it's not displaying strings with multiple blank spaces as they are on the array, instead is using only one space, how can I remove this feature.

Ex: The string "Hello World" is been display as "Hello World" but I need to display the string as it is inside the select

Answer 1

how can I remove this feature?

Actually, it has nothing to do with ReactJS or MaterialUI.
It's the way how HTML works. The HTML specifications stated to ignore excess whitespace.
But still if for some reason you wanted to have extra spaces in your string then there are a few workarounds as below -

1. You can use &nbsp instead of space in your HTML/string as shown below for Material UI MenuItem

<MenuItem value={22}>Twenty &nbsp;&nbsp;&nbsp; Two</MenuItem>

2. You can also use the <pre> HTML tag around your string or you can also do it with the CSS property white-space: pre;

<MenuItem style={{ whiteSpace: "pre" }} value={22} >Twenty    Two</MenuItem>

white-space: pre;
This value prevents user agents from collapsing sequences of white space. Lines are only broken at preserved newline characters.

References -

• Why does HTML require that multiple spaces show up as a single space in the browser?
• White space: the 'white-space' property
• 9.1 White space
• <pre> html tag