HTML Select cutting text off
Turns out there's a simple fix (courtesy of Select box truncating text when body font size changed via javascript on document ready in IE 9):
$('select').append(' ');
Forces the select to be redrawn.
Text gets cut when using select
Firstly remove the height: 23px;
declaration.
Notice the the text is not cut anymore, however the elements have a greater height than what was needed.
To fix this, just change the padding to padding: 6px 10px;
FIDDLE
input,
select {
box-sizing: content-box;
width: 90%;
padding: 6px 10px;
font-family: TheBoldFont;
font-size: 27px;
color: #f26e7c;
border: 4px solid black;
border-radius: 12px;
}
<input type="text" value="xxxxxxx">
<select>
<option selected value="xxxxxxxxx">xxxxxxxx</option>
</select>
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>
Select dropdown with fixed width cutting off content in IE
For IE 8 there is a simple pure css-based solution:
select:focus {
width: auto;
position: relative;
}
(You need to set the position property, if the selectbox is child of a container with fixed width.)
Unfortunately IE 7 and less do not support the :focus selector.
html select dropdrown width is too big
Sample HTML:
<select id="myOptions">
<option value="1"><span>Item 1</span></option>
<option value="2">Item 2</option>
<option value="3">Item 3 which has very very very very very long text</option>
<option value="4">Item 4</option>
</select>
Sample CSS:
select{
width: 100px;
text-overflow: ellipsis;
}
DEMO - Adding ... to selected value only
Change the width to what ever fits your situation best. Applying text-overflow: ellipsis
adds the ...
to the text which is longer than the specified width.
This style is only applied to the selected value but still displays the options in full when the dropdown is clicked.
If select option text length is greater than 10 then trim jQuery
You can do this:
$('select').change(function(){
if(this.value.length >= 10){
console.log('long title');
//trimming
var trim = $.trim(this.value).substring(0, 10) + "...";
alert(trim);
//Set the text in the select
$(this).find("option:selected").text(trim);
}
});
Demo: http://jsfiddle.net/yjeAN/3/
Ellipsis for overflow text in dropdown boxes
NOTE: As of July 2020, text-overflow: ellipsis
works for <select>
on Chrome
HTML is limited in what it specifies for form controls. That leaves room for operating system and browser makers to do what they think is appropriate on that platform (like the iPhone’s modal select
which, when open, looks totally different from the traditional pop-up menu).
If it bugs you, you can use a customizable replacement, like Chosen, which looks distinct from the native select
.
Or, file a bug against a major operating system or browser. For all we know, the way text is cut off in select
s might be the result of a years-old oversight that everyone copied, and it might be time for a change.
Related Topics
Provide an Image for Whatsapp Link Sharing
Change Arrow Colors in Bootstraps Carousel
Call Method from HTML Only One Time in Angular2
How to Place Div in Top Right Hand Corner of Page
Inserting an Image from Local Directory in Thymeleaf Spring Framework (With Maven)
How to Declare a Variable in a Template in Angular
How to Rotate the Block Every Time You Click on the Button
Position: Sticky Buttons Not Working in Ie 11
How to Use a :Before or :After Pseudo-Element on an Input Field
Center Image Using Text-Align Center
How to Remove Blue Highlight on Hover in Select, Option Inputs HTML for Chrome
Html:How to Make a Curve Like This Using HTML & CSS Using Border or Box
How to Click a Button on a Website Using Puppeteer Without Any Class, Id ,... Assigned to It
How to Affect Other Elements When One Element Is Hovered
How to Remove the Default Arrow Icon from a Dropdown List (Select Element)
Background Size for Mobile Devices