Czy możliwe jest przepełnienie tekstu: elipsa do wyboru tylko z css?

Question

Czy można wykonać text-overflow: ellipsis; dla select? W modelu div jest to proste. Kiedy ciąg jest zbyt długi, są kropki, ja potrzebuję tego samego w select. Wiem, że jest to możliwe z js, ale chciałbym, aby „światło” css decyzję:

.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+CgkJPGNsaXBQYXRoIGlkPSJjbGlwXzAiPgoJCQk8cmVjdCB4PSItNDE1IiB5PSItNjYyIiB3aWR0aD0iMTQzNyIgaGVpZ2h0PSIyMjE2IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KCQk8L2NsaXBQYXRoPgoJPC9kZWZzPgoJPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXBfMCkiPgoJCTxwYXRoIGZpbGw9InJnYig2NSw2NSw2NSkiIHN0cm9rZT0ibm9uZSIgZD0iTTAuNjUzNDQzIDQuNzY4MzdlLTA3TDExLjM0NjEgLTQuNzY4MzdlLTA3QzExLjk0MDIgLTQuNzY4MzdlLTA3IDEyLjE2ODIgMC41ODQ0ODggMTEuODY4MiAwLjkwNzY0OUw2LjU1MDMzIDYuNzE0MDRDNi4yNDczMSA3LjAzNjAzIDUuNzUzNzcgNy4xMTc3IDUuNDUwNzYgNi43OTQ1NEwwLjEzMjkxIDAuODY2ODE3Qy0wLjE3MDEwOSAwLjU0NDgyMyAwLjA2MjQwNTYgNC43NjgzN2UtMDcgMC42NTM0NDMgNC43NjgzN2UtMDciLz4KCTwvZz4KPC9zdmc+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

nie najczystsze rozwiązanie ale można zawsze „trick” to, owijając wybierz wewnątrz div i użyć :after pseudoelement aby umieścić fałszywy ... nad select hidding treść poniżej:

.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+CgkJPGNsaXBQYXRoIGlkPSJjbGlwXzAiPgoJCQk8cmVjdCB4PSItNDE1IiB5PSItNjYyIiB3aWR0aD0iMTQzNyIgaGVpZ2h0PSIyMjE2IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KCQk8L2NsaXBQYXRoPgoJPC9kZWZzPgoJPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXBfMCkiPgoJCTxwYXRoIGZpbGw9InJnYig2NSw2NSw2NSkiIHN0cm9rZT0ibm9uZSIgZD0iTTAuNjUzNDQzIDQuNzY4MzdlLTA3TDExLjM0NjEgLTQuNzY4MzdlLTA3QzExLjk0MDIgLTQuNzY4MzdlLTA3IDEyLjE2ODIgMC41ODQ0ODggMTEuODY4MiAwLjkwNzY0OUw2LjU1MDMzIDYuNzE0MDRDNi4yNDczMSA3LjAzNjAzIDUuNzUzNzcgNy4xMTc3IDUuNDUwNzYgNi43OTQ1NEwwLjEzMjkxIDAuODY2ODE3Qy0wLjE3MDEwOSAwLjU0NDgyMyAwLjA2MjQwNTYgNC43NjgzN2UtMDcgMC42NTM0NDMgNC43NjgzN2UtMDciLz4KCTwvZz4KPC9zdmc+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>

Dodałem także pointer-events: none; do elementu więc nawet jeśli klikniesz na nim nadal będzie otwierać wybierz poniżej.