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>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 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 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
Wrap the text into the next line for Drop down
It is not possible to customise width of a option, if you want to achieve this then you can use custom select plugins like
- https://select2.github.io/examples.html
- https://harvesthq.github.io/chosen/
See Chosen Demo in the below snippet.
var name1 = "Ajnjkbndgjkdrhgkhtgjkdrhtjkrhtukhrtjkjerthrjklthkretklejkltjrkltjekltjklejtklejrkltjerkltjklert kqh4ui3hui4h23uio4 uiheruiwhruio3h 2ruihuihw3uirh34uirhuioh e riohewiorh wioriorh weuiohriowe4", name2 = "B", name3 = "C";
var s = document.getElementById('names');s.children[0].innerText = name1;s.children[1].innerText = name2;s.children[2].innerText = name3;
$("#names").chosen({ width: "200px"});/*!Chosen, a Select Box Enhancer for jQuery and Prototypeby Patrick Filler for Harvest, http://getharvest.com
Version 1.6.2Full source at https://github.com/harvesthq/chosenCopyright (c) 2011-2016 Harvest http://getharvest.com
MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.mdThis file is generated by `grunt build`, do not edit it by hand.*/
/* @group Base */
.chosen-container { position: relative; display: inline-block; vertical-align: middle; font-size: 13px; -webkit-user-select: none; -moz-user-select: none; user-select: none;}
.chosen-container * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.chosen-container .chosen-drop { position: absolute; top: 100%; left: -9999px; z-index: 1010; width: 100%; border: 1px solid #aaa; border-top: 0; background: #fff; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);}
.chosen-container.chosen-with-drop .chosen-drop { left: 0;}
.chosen-container a { cursor: pointer;}
.chosen-container .search-choice .group-name,.chosen-container .chosen-single .group-name { margin-right: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: normal; color: #999999;}
.chosen-container .search-choice .group-name:after,.chosen-container .chosen-single .group-name:after { content: ":"; padding-left: 2px; vertical-align: top;}
/* @end */
/* @group Single Chosen */
.chosen-container-single .chosen-single { position: relative; display: block; overflow: hidden; padding: 0 0 0 8px; height: 25px; border: 1px solid #aaa; border-radius: 5px; background-color: #fff; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4)); background: -webkit-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); background: -moz-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); background: -o-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); background: linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); background-clip: padding-box; box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1); color: #444; text-decoration: none; white-space: nowrap; line-height: 24px;}
.chosen-container-single .chosen-default { color: #999;}
.chosen-container-single .chosen-single span { display: block; overflow: hidden; margin-right: 26px; text-overflow: ellipsis; white-space: nowrap;}
.chosen-container-single .chosen-single-with-deselect span { margin-right: 38px;}
.chosen-container-single .chosen-single abbr { position: absolute; top: 6px; right: 26px; display: block; width: 12px; height: 12px; background: url('chosen-sprite.png') -42px 1px no-repeat; font-size: 1px;}
.chosen-container-single .chosen-single abbr:hover { background-position: -42px -10px;}
.chosen-container-single.chosen-disabled .chosen-single abbr:hover { background-position: -42px -10px;}
.chosen-container-single .chosen-single div { position: absolute; top: 0; right: 0; display: block; width: 18px; height: 100%;}
.chosen-container-single .chosen-single div b { display: block; width: 100%; height: 100%; background: url('chosen-sprite.png') no-repeat 0px 2px;}
.chosen-container-single .chosen-search { position: relative; z-index: 1010; margin: 0; padding: 3px 4px; white-space: nowrap;}
.chosen-container-single .chosen-search input[type="text"] { margin: 1px 0; padding: 4px 20px 4px 5px; width: 100%; height: auto; outline: 0; border: 1px solid #aaa; background: white url('chosen-sprite.png') no-repeat 100% -20px; background: url('chosen-sprite.png') no-repeat 100% -20px; font-size: 1em; font-family: sans-serif; line-height: normal; border-radius: 0;}
.chosen-container-single .chosen-drop { margin-top: -1px; border-radius: 0 0 4px 4px; background-clip: padding-box;}
.chosen-container-single.chosen-container-single-nosearch .chosen-search { position: absolute; left: -9999px;}
/* @end */
/* @group Results */
.chosen-container .chosen-results { color: #444; position: relative; overflow-x: hidden; overflow-y: auto; margin: 0 4px 4px 0; padding: 0 0 0 4px; max-height: 240px; -webkit-overflow-scrolling: touch;}
.chosen-container .chosen-results li { display: none; margin: 0; padding: 5px 6px; list-style: none; line-height: 15px; word-wrap: break-word; -webkit-touch-callout: none;}
.chosen-container .chosen-results li.active-result { display: list-item; cursor: pointer;}
.chosen-container .chosen-results li.disabled-result { display: list-item; color: #ccc; cursor: default;}
.chosen-container .chosen-results li.highlighted { background-color: #3875d7; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc)); background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%); background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%); background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%); background-image: linear-gradient(#3875d7 20%, #2a62bc 90%); color: #fff;}
.chosen-container .chosen-results li.no-results { color: #777; display: list-item; background: #f4f4f4;}
.chosen-container .chosen-results li.group-result { display: list-item; font-weight: bold; cursor: default;}
.chosen-container .chosen-results li.group-option { padding-left: 15px;}
.chosen-container .chosen-results li em { font-style: normal; text-decoration: underline;}
/* @end */
/* @group Multi Chosen */
.chosen-container-multi .chosen-choices { position: relative; overflow: hidden; margin: 0; padding: 0 5px; width: 100%; height: auto; border: 1px solid #aaa; background-color: #fff; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff)); background-image: -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%); background-image: -moz-linear-gradient(#eeeeee 1%, #ffffff 15%); background-image: -o-linear-gradient(#eeeeee 1%, #ffffff 15%); background-image: linear-gradient(#eeeeee 1%, #ffffff 15%); cursor: text;}
.chosen-container-multi .chosen-choices li { float: left; list-style: none;}
.chosen-container-multi .chosen-choices li.search-field { margin: 0; padding: 0; white-space: nowrap;}
.chosen-container-multi .chosen-choices li.search-field input[type="text"] { margin: 1px 0; padding: 0; height: 25px; outline: 0; border: 0 !important; background: transparent !important; box-shadow: none; color: #999; font-size: 100%; font-family: sans-serif; line-height: normal; border-radius: 0;}
.chosen-container-multi .chosen-choices li.search-choice { position: relative; margin: 3px 5px 3px 0; padding: 3px 20px 3px 5px; border: 1px solid #aaa; max-width: 100%; border-radius: 3px; background-color: #eeeeee; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee)); background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); background-size: 100% 19px; background-repeat: repeat-x; background-clip: padding-box; box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05); color: #333; line-height: 13px; cursor: default;}
.chosen-container-multi .chosen-choices li.search-choice span { word-wrap: break-word;}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close { position: absolute; top: 4px; right: 3px; display: block; width: 12px; height: 12px; background: url('chosen-sprite.png') -42px 1px no-repeat; font-size: 1px;}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover { background-position: -42px -10px;}
.chosen-container-multi .chosen-choices li.search-choice-disabled { padding-right: 5px; border: 1px solid #ccc; background-color: #e4e4e4; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee)); background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); color: #666;}
.chosen-container-multi .chosen-choices li.search-choice-focus { background: #d4d4d4;}
.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close { background-position: -42px -10px;}
.chosen-container-multi .chosen-results { margin: 0; padding: 0;}
.chosen-container-multi .chosen-drop .result-selected { display: list-item; color: #ccc; cursor: default;}
/* @end */
/* @group Active */
.chosen-container-active .chosen-single { border: 1px solid #5897fb; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);}
.chosen-container-active.chosen-with-drop .chosen-single { border: 1px solid #aaa; -moz-border-radius-bottomright: 0; border-bottom-right-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff)); background-image: -webkit-linear-gradient(#eeeeee 20%, #ffffff 80%); background-image: -moz-linear-gradient(#eeeeee 20%, #ffffff 80%); background-image: -o-linear-gradient(#eeeeee 20%, #ffffff 80%); background-image: linear-gradient(#eeeeee 20%, #ffffff 80%); box-shadow: 0 1px 0 #fff inset;}
.chosen-container-active.chosen-with-drop .chosen-single div { border-left: none; background: transparent;}
.chosen-container-active.chosen-with-drop .chosen-single div b { background-position: -18px 2px;}
.chosen-container-active .chosen-choices { border: 1px solid #5897fb; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);}
.chosen-container-active .chosen-choices li.search-field input[type="text"] { color: #222 !important;}
/* @end */
/* @group Disabled Support */
.chosen-disabled { opacity: 0.5 !important; cursor: default;}
.chosen-disabled .chosen-single { cursor: default;}
.chosen-disabled .chosen-choices .search-choice .search-choice-close { cursor: default;}
/* @end */
/* @group Right to Left */
.chosen-rtl { text-align: right;}
.chosen-rtl .chosen-single { overflow: visible; padding: 0 8px 0 0;}
.chosen-rtl .chosen-single span { margin-right: 0; margin-left: 26px; direction: rtl;}
.chosen-rtl .chosen-single-with-deselect span { margin-left: 38px;}
.chosen-rtl .chosen-single div { right: auto; left: 3px;}
.chosen-rtl .chosen-single abbr { right: auto; left: 26px;}
.chosen-rtl .chosen-choices li { float: right;}
.chosen-rtl .chosen-choices li.search-field input[type="text"] { direction: rtl;}
.chosen-rtl .chosen-choices li.search-choice { margin: 3px 5px 3px 0; padding: 3px 5px 3px 19px;}
.chosen-rtl .chosen-choices li.search-choice .search-choice-close { right: auto; left: 4px;}
.chosen-rtl.chosen-container-single-nosearch .chosen-search,.chosen-rtl .chosen-drop { left: 9999px;}
.chosen-rtl.chosen-container-single .chosen-results { margin: 0 0 4px 4px; padding: 0 4px 0 0;}
.chosen-rtl .chosen-results li.group-option { padding-right: 15px; padding-left: 0;}
.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div { border-right: none;}
.chosen-rtl .chosen-search input[type="text"] { padding: 4px 5px 4px 20px; background: white url('chosen-sprite.png') no-repeat -30px -20px; background: url('chosen-sprite.png') no-repeat -30px -20px; direction: rtl;}
.chosen-rtl.chosen-container-single .chosen-single div b { background-position: 6px 2px;}
.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b { background-position: -12px 2px;}
/* @end */
/* @group Retina compatibility */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min-resolution: 144dpi),only screen and (min-resolution: 1.5dppx) { .chosen-rtl .chosen-search input[type="text"], .chosen-container-single .chosen-single abbr, .chosen-container-single .chosen-single div b, .chosen-container-single .chosen-search input[type="text"], .chosen-container-multi .chosen-choices .search-choice .search-choice-close, .chosen-container .chosen-results-scroll-down span, .chosen-container .chosen-results-scroll-up span { background-image: url('chosen-sprite@2x.png') !important; background-size: 52px 37px !important; background-repeat: no-repeat !important; }}
/* @end */<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script><select id="names" style="width:500px" class='setMyWidth'> <option value="a">fill1</option> <option value="b">fill2</option> <option value="c">fill3</option></select>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.
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
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
Related Topics
Google Fonts Are Not Rendering on Google Chrome
Is Type="Text/Css" Necessary in a ≪Link≫ Tag
Why Doesn't "Margin: Auto" Center an Element Vertically
How to Center an Element in the Middle of the Browser Window
Prevent Scroll-Bar from Adding-Up to the Width of Page on Chrome
How to Hide HTML Source & Disable Right Click and Text Copy
How to Stop 100% Width Text Boxes from Extending Beyond Their Containers
Radio Buttons and Label to Display in Same Line
HTML Links Not Working (Using Base Href)
How to Support Placeholder Attribute in Ie8 and 9
Multiple Radio Button Groups in One Form
Difference Between ≪Input Type='Submit' /≫ and ≪Button Type='Submit'≫Text≪/Button≫
CSS Background Image Not Loading
How to Make Bootstrap 3 Fluid Layout Without Horizontal Scrollbar
How to Make a Whole 'Div' Clickable in HTML and CSS Without JavaScript
Preventing Firefox from Remembering the Input Value on Refresh with a Meta Tag