Fix width for Select > Option

Fix width for Select > Option using JQuery

by Pankaj Sapkal

HTML

<select name="example" id="example">
    <option value="">This is some long text</option>
    <option value="">Short Text</option>
    <option value="">This is some really, really long textThis is some really, really long textThis is some really, really long textThis is some really, really long textThis is some really, really long text</option>
</select>

CSS

select
{
  min-width:265px;
    min-height: 45px;
    border-width: 3px;
    border-color: rgba(50, 50, 50, 0.14);
    margin: 10px 10px 10px 0px;
}
option
{
  position:fixed;  
}

JavaScript

var maxLength = 50;
$('#example > option').text(function(i, text) {
    if (text.length > maxLength) {
        return text.substr(0, maxLength) + '...';  
    }
});