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

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?

htmlcss


Solution 1:[1]

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 class="select2 narrow wrap">
  <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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Voorie

Related Questions