overflow-y or word-break nothing is working for HTML options tag-CodePudding

In my angular app dynamically I was creating options tag inside of select.

The HTML is somehow similar to this one.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<select size="10" name="ChangeProcessGroups"style="width: 200px; word-wrap: break-word">
  <option value="0: -1">Something long string. But it goes outside of the box</option> 
</select>
</body>
</html>

Now browsing from chrome shows no problem as overflow-y is working properly. But the problem occurs while browsing it from firefox. Overflow, and word-break, none of the CSS properly working properly, and if options value is long enough then disappeared and can't see the full string value. What could be the possible solution for it?

CodePudding user response：

If you are willing to use the js library select2, then here is a working fiddle by Kyle Mitofsky.

var $select2 = $('.select2').select2({
  containerCssClass: "wrap"
})

.select2.narrow {
  width: 200px;
}

.wrap.select2-selection--single {
  height: 100%!important; /* Does not work without !important?? */
}

.select2-container .wrap.select2-selection--single .select2-selection__rendered {
  word-wrap: break-word;
  text-overflow: inherit;
  white-space: normal;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>

<select >
  <option value="AL">Really long name that normally</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

This works in webkit and moz browsers.