title: How do you wrap text to the next line in a material UI select/menu item component? (CSS issue)
body: <p>I'm trying to show a school's cancelled classes in a select menu.  It's arranged by day:
  <a href="https://i.stack.imgur.com/uCikq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uCikq.png" alt="Desktop view looks correct" /></a></p>
  <p>However, my menu just cuts off the overflow text when at a mobile resolution in developer tools.
  <a href="https://i.stack.imgur.com/Ap4ie.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ap4ie.png" alt="enter image description here" /></a>
  The thermodynamics class is cut off.</p>
  <p>I'm using material ui's select menu with react. <a href="https://material-ui.com/components/selects/" rel="nofollow noreferrer">Material UI Select documentation</a> I'm also using the <a href="https://material-ui.com/components/menus/" rel="nofollow noreferrer">menu item</a>. I want to have classes listed overflow onto the next line. The  is where I show the classes per day.</p>
  <p>This is the code (it's just an example, and it doesn't run):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  
  &lt;FormControl className={classes.formControl}&gt;
        &lt;InputLabel id="demo-controlled-open-select-label" &gt; Filter classes by day&lt;/InputLabel&gt;
       
        &lt;Select
          labelId="demo-controlled-open-select-label"
          id="demo-controlled-open-select"
          open={open}
          onClose={handleClose}
          onOpen={handleOpen}
            defaultValue={subjectFilter}
            onChange={handleChangeSubject}
          className="styleSelect"
  
          &gt;
           {item.SUBJECT === 'OPEN_LEARNING' &amp;&amp; 
                 &lt;ul className ="stylingList"&gt;
                 {(state.subjects) &amp;&amp; state.subjects.filter(item =&gt; 
                 (item.SUBJECT === 'OPEN_LEARNING')).map(item =&gt; 
                   &lt;li className ="stList"&gt;
                     {item.CLASS_FULL}
                   &lt;/li&gt;
                   )}
                   &lt;/ul&gt;
                }
              &lt;/MenuItem&gt;
              //this is just one day.  I do this for all the days.
            ) )
          }
       
          &lt;/Select&gt;
        &lt;/FormControl&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I don't have styles on the classes listed. I just made class names to customize the areas later if needed.  I just changed the text color. Thanks. I tried overflow-wrap: break-word; on the li class (stList), but it didn't make the words go to the next line.</p>