Có thể tạo tràn văn bản: dấu chấm lửng để chọn chỉ với css không?

Question

Có thể thực hiện text-overflow: ellipsis; cho select không? Trong các div nó là đơn giản. Khi chuỗi quá dài có dấu chấm, tôi cần giống nhau trong select. Tôi biết, đó là có thể với js, nhưng tôi muốn để có được "ánh sáng" css quyết định:

.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

Không phải là giải pháp sạch nhưng bạn có thể luôn luôn "lừa" nó, gói chọn bên trong một div, và sử dụng :after pseudoelement đến vị trí một giả ... qua select hidding nội dung dưới đây:

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

Tôi cũng đã thêm pointer-events: none; vào phần tử để ngay cả khi bạn nhấp vào nó, nó sẽ vẫn mở lựa chọn bên dưới.