The material select behaves very well in the drop-down part when handling long text - the long selectable item is wrapped in the drop-down. However, on a limited width screen, then placeholder is still input type="text" and therefore can't display long content well.

Has anyone experimented with a better solution? Putting a label in place and hiding the input? Or is there a better way to get what I'm after here?

Here is the select: <span class="hoverable" onClick="$('.mdb-select').materialSelect();" style="cursor: pointer;"
                      >(Click to Activate)</span>
<div style="width: 200px;">
  <select class="mdb-select">
    <option>--Select Me--</option>
    <option value="1" selected>Here is a selected really long line of content</option>
    <option value="2">Here is the first unselected really long line of content</option>
    <option value="3">Here is the second unselected really long line of content</option>
    <option value="4">Here is the third unselected really long line of content</option>
    <option value="5">Here is the fourth unselected really long line of content</option>
    <option value="6">Here is the fifth unselected really long line of content</option>

  </select>
</div>

Snippet