Make Text in Select Element Wrap When Too Long

HTML Dropdown (select) with Text Wrap and Border after every value (option)

select {

  width: 100px;

  overflow: hidden;

  white-space: pre;

  text-overflow: ellipsis;

  -webkit-appearance: none;

}

option {

  border: solid 1px #DDDDDD;

}

<select name="d" class="myselect">

  <option value="sdf" class="test1"> line text How to wrap the big line text </option>

  <option value="sdf2" class="test1"> line text How to wrap the big line text </option>

  <option value="sdf3" class="test1"> line text How to wrap the big line text </option>

  <option value="sdf4" class="test1"> line text How to wrap the big line text </option>

</select>

Make text in select element wrap when too long?

Using CSS to do this will only work in Chrome...

You can't do it just by using CSS, but you can use some jQuery for
a "look like" solution.

Take a look at the this quick demo I made: JSnippet DEMO

As you can see it behaves like you wanted - I'm wrapping the select box with a DIV
and adding another one that will overlap the select box - he takes the select box fixed width minus
the button of the select box. Now I'm assigning to this div the same appearance as the select box +
The selected value.

Every time the select box will be changed the new value will be set in the mask we created and
the calculated new height will be set to the select box to.

Here is the jQuery code:

$(function(){
var mYbrowser = detectBrows();
console.log(mYbrowser[0]);
$('select').each(function(index,ele){

    //get current style and fixed width:
    var renderWidth = $(ele).outerWidth();
    var renderWidthFixed = renderWidth;
    var borderstyle = $(ele).css("border-bottom-style");
    var bordercolor = $(ele).css("border-bottom-color");
    var borderwidth = $(ele).css("border-bottom-width");
    var font = $(ele).css("font");
    var defaultValue = $(ele).val();
    if (borderwidth == "0px") { borderwidth = "1px"; /*FF*/ }
    $(ele).css({ cursor:"pointer" });

    // set by browser (different buttons):
    var borderRightParsed = borderwidth +" " + borderstyle + " " + bordercolor;
    var topParsed = Math.round(parseInt(borderwidth.replace(/[^0-9\.]+/g,"")));
    switch(mYbrowser[0]) {
            case "MSIE": renderWidthFixed = renderWidth-28; break;
            case "I": renderWidthFixed = renderWidth-28; break;                 
            case "Chrome": renderWidthFixed = renderWidth-30; break;
            case "Firefox": 
                            renderWidthFixed = renderWidth-27; 
                            borderRightParsed= "0"; 
                            if (index > 0) topParsed++;
                            break; 
    }
    //wrap + add a overlapping layer that will hide content and calculate the correct height:
    $(ele).wrap($('<div />').css({width:renderWidth, margin:0, padding:0, position:"relative"}));
    $(ele).after($("<div>" + defaultValue + "</div>")
                   .css({
                       minHeight:20,
                       padding:"5px 0px 5px 8px",
                       width:renderWidthFixed,
                       backgroundColor:"white",
                       whiteSpace:"pre-wrap",
                       position:"absolute",
                       borderRight:borderRightParsed,
                       top:topParsed,
                       cursor:"default",
                       left:borderwidth,
                       font:font
                   })
                );
    //set select box new height:
    setHeight(ele);

    //append change behavior:
    $(ele).change(function(){
        $(ele).next('div').text($(ele).val());
        setHeight(ele);
    });

});

function setHeight(ele) {
    var newHeight = $(ele).next('div').outerHeight();
    $(ele).height(newHeight);

}

function detectBrows(){
    var ua= navigator.userAgent, tem, 
        M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
        if(/trident/i.test(M[1])){
            tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
            return 'IE '+(tem[1] || '');
        }
        if(M[1]=== 'Chrome'){
            tem= ua.match(/\bOPR\/(\d+)/)
            if(tem!= null) return 'Opera '+tem[1];
        }
        M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
        if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
        return M;        
}
});

Its simple and not complicated - the problem is that the select box element behave
and look different on each browser.
I added a small quick function to detect which browser is used and fine tuning his
unique values.

This method can be Improved but that's a good starting point.

Shlomo

How do I make a select option wrap when it exceeds the max width?

If you are using bootstrap you can use the bootstrap selectpicker class with the data-content attribute.

 <select class="selectpicker form-control" data-live-search="true" 
     id="subject_teacher_drop_down">
   <option data-content="English" title="English">English</option>
   <option data-content="Methodology of social..."  title="Methodology of social science 
     with special reference to economics">
     Methodology of social science with special reference to economics
   </option>
 </select>

word wrap in select option menu

I'm using bootstrap classes and no additional css yet.

Since you're using bootstrap, you can create dropdown using <div> or <a> tag instead of <select>. It's easier to wrap the text inside.

You can set the default width for dropdown-menu class and update white-space property for all of the child items .dropdown-item.

.dropdown-menu {

  width: 170px;

}

.dropdown-menu .dropdown-item {

  white-space: normal;

}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="dropdown">

  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

    Dropdown button

  </button>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">

    <a class="dropdown-item" href="#">Action</a>

    <a class="dropdown-item" href="#">Another action</a>

    <a class="dropdown-item" href="#">Something else here Something else here Something else here Something else here Something else here Something else here Something else here</a>

  </div>

</div>

How to Wrap Text in HTML Option

Seeing as the value and text of a Select can be very different. I would say if in the event a string thats in your select for the text is longer than X truncate it.

Example with jquery

$('#myselect option').each(function()
{
    var myStr = $(this).text();
    if(myStr.length > 15){$(this).text(myStr.substring(15));}
});

put that in your document ready, and it will trim your text down to a better size, wrapping your elements in a div that will hide the overflow is going to make something of a mess later, and you will be back here trying to solve a similar issue caused by that for strings that are smaller.

Antd word-wrap in Select

You'd need to override the styles.

.ant-select-show-search.ant-select:not(.ant-select-customize-input)
  .ant-select-selector {
  height: auto;
}
.ant-select-single.ant-select-show-arrow .ant-select-selection-item {
  white-space: normal;
  word-break: break-all;
}

CodeSandbox

wrap text in list generated from jquery

This is happening because you are adding an <option> element and they will need to be styled..

It should be noted that options are for the select, optgroup and datalist elements..

As you are nesting them in a ul, I would suggest you change the javascript to

$('#jobs').append('<li>'+x[0]+'</li>');
$('#jobslinks').append('<li>'+x[1]+'</li>');

This will then format correctly the content.

Related Question & Answer

How make Select box smaller when option is too long

We can't apply styling to options in select elements as msdn mentioned here: Except for background-color and color, style settings applied through the style object for the option element are ignored.

Word wrap options in a select list

you cant do this with a standard <option> you will need to roll-your-own or find a menu plugin

---

Related Topics