是否可以使用CSS選擇文本溢出：省略號？

text-overflow: ellipsis;是否可以爲select？在div這很簡單。當字符串太長有點時，我需要在select中相同。我知道，這是可能的js，但我想獲得「光」 css決定：是否可以使用CSS選擇文本溢出：省略號？

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

來源

2017-08-03 kizoso

不，「文本溢出」只能應用於塊級元素：https：//developer.mozilla.org/en-US/docs/Web/CSS/text-overflow – sean

html沒有選擇的屬性。而且大多數瀏覽器都有不同的顯示html標籤的方式。你可以做的是，使用一些js/css庫，如https://harvesthq.github.io/chosen/或https://silviomoreto.github.io/bootstrap-select/ –

不是最乾淨的解決方案，但你總是可以「欺騙」了，包裹選擇一個div內，並使用:after pseudoelement在select hidding下面的內容到一個虛假...的位置：

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

我還增加pointer-events: none;的元素，所以即使你點擊它，它仍然會打開下面的選擇。

來源

2017-12-21 09:42:04

是否可以使用CSS選擇文本溢出：省略號？

回答

相關問題