是否可以使用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选择文本溢出：省略号？

回答

相关问题