<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#aa{
width: 100px;
}
select option{
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px;
}
select::-ms-expand {
display: none;
}
select {
display: inline-block;
box-sizing: border-box;
padding: 0.5em 2em 0.5em 0.5em;
border: 1px solid #eee;
font: inherit;
line-height: inherit;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
background-repeat: no-repeat;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: right 15px top 1em, right 10px top 1em;
background-size: 5px 5px, 5px 5px;
}
</style>
</head>
<body>
<select id="s">
<option value="1" title="1">1</option>
<option value="2" title="2">2</option>
<option value="3" title="3">3</option>
<option value="4" title="4">4</option>
<option value="5" title="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25" title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
</select>
<script>
function SetOptionTitle()
{
var selects = document.getElementsByTagName("select");
if (selects.length > 0)
{
for (var i = 0; i < selects.length; i++)
{
var options = selects[i].options;
if (selects[i].options.length > 0)
{
for (var j = 0; j < options.length; j++)
{
if( options[j].text.length>10){
console.log( options[j].text.slice(0,10)+'...');
options[j].text= options[j].text.slice(0,10)+'...'
}
if (options[j].title == ""){
options[j].title = options[j].text;
}
}
}
}
}
}
SetOptionTitle()
</script>
</body>
</html>
