JSFiddle - React, Tailwind, and code Playground

by koenpunt

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.css">
<select class="chosen" multiple="true">
    <option>Cheese</option>
    <option selected="selected">Ham</option>
    <option>Mushrooms</option>
    <option selected="selected">Pineapple</option>
    <option selected="selected">AVeryLongNameThatWillDefinitelyOverflowTheWidth</option>
</select>

CSS

.chosen {
    width:250px;
}

/*suggested CSS fix*/
.search-choice {max-width:95%; box-sizing: border-box;}
.search-choice span {max-width: 100%; word-wrap: break-word; display: inline-block;}
.chosen-drop {word-wrap: break-word;}

JavaScript

$(".chosen").chosen();