Is it possible to make a text overflow: an ellipsis for selection only with css?

Question

Is it possible to do text-overflow: ellipsis; for select ? In a div it's simple. When the line is too long, there are dots, I need the same in select . I know this is possible with js , but I would like to get a “lightweight” css solution:

 .select { box-sizing: border-box; display: block; width: 200px; height: 34.5px; padding: 5px 22px 3px 11px; font: 400 16px/24px sans-serif; color: #464a4c; vertical-align: middle; background: #fff url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiID8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyIiBoZWlnaHQ9IjciPgoJPGRlZnM++Cg==) no-repeat right 6px top 13px; border: 1px solid #D6D6D6; border-radius: 0; -moz-appearance: none; -webkit-appearance: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } / svg + xml; base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiID8 + CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyIiBoZWlnaHQ9IjciPgoJPGRlZnM ++ Cg ==) no-repeat right 6px top 13px; .select { box-sizing: border-box; display: block; width: 200px; height: 34.5px; padding: 5px 22px 3px 11px; font: 400 16px/24px sans-serif; color: #464a4c; vertical-align: middle; background: #fff url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiID8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyIiBoZWlnaHQ9IjciPgoJPGRlZnM++Cg==) no-repeat right 6px top 13px; border: 1px solid #D6D6D6; border-radius: 0; -moz-appearance: none; -webkit-appearance: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } 

 <select class="select"> <option selected>select Mississippi Mississippi Mississippi Mississippi Mississippi</option> <option value="1">1 Mississippi Mississippi Mississippi Mississippi Mississippi</option> <option value="2">2 Mississippi Mississippi Mississippi Mississippi Mississippi</option> <option value="3">3 Mississippi Mississippi Mississippi Mississippi Mississippi</option> </select> <br> <div class="select">div Mississippi Mississippi Mississippi Mississippi Mississippi</div> 

Answer 1

Not the cleanest solution, but you can always “trick” it, wrap the selection inside a div and use the :after pseudo-element to put a fake ... on top of the select , disallowing the content below:

 .select { box-sizing: border-box; display: block; width: 200px; height: 34.5px; padding: 5px 22px 3px 11px; font: 400 16px/24px sans-serif; color: #464a4c; vertical-align: middle; background: #fff url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiID8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyIiBoZWlnaHQ9IjciPgoJPGRlZnM++Cg==) no-repeat right 6px top 13px; border: 1px solid #D6D6D6; border-radius: 0; -moz-appearance: none; -webkit-appearance: none; position:relative; } div { position:relative; display:inline-block; } div:after { content: '...'; display: block; background-color: #fff; height: 15px; width: 25px; color: #464a4c; position: absolute; right: 23px; bottom: 11px; text-align: center; pointer-events: none; } / svg + xml; base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiID8 + CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyIiBoZWlnaHQ9IjciPgoJPGRlZnM ++ Cg ==) no-repeat right 6px top 13px; .select { box-sizing: border-box; display: block; width: 200px; height: 34.5px; padding: 5px 22px 3px 11px; font: 400 16px/24px sans-serif; color: #464a4c; vertical-align: middle; background: #fff url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiID8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyIiBoZWlnaHQ9IjciPgoJPGRlZnM++Cg==) no-repeat right 6px top 13px; border: 1px solid #D6D6D6; border-radius: 0; -moz-appearance: none; -webkit-appearance: none; position:relative; } div { position:relative; display:inline-block; } div:after { content: '...'; display: block; background-color: #fff; height: 15px; width: 25px; color: #464a4c; position: absolute; right: 23px; bottom: 11px; text-align: center; pointer-events: none; } 

 <div> <select class="select"> <option selected>select Mississippi Mississippi Mississippi Mississippi Mississippi</option> <option value="1">1 Mississippi Mississippi Mississippi Mississippi Mississippi</option> <option value="2">2 Mississippi Mississippi Mississippi Mississippi Mississippi</option> <option value="3">3 Mississippi Mississippi Mississippi Mississippi Mississippi</option> </select> </div> 

I also added an element pointer-events: none; into an element, therefore, even if you click on it, it will still open the next one below.