是否有可能使文本溢出：只用css选择省略号？ [英] Is it possible to make text-overflow:ellipsis for select with css only?

问题描述

对于选择是否可以使 text-overflow：ellipsis; ？在 div 中很简单。当字符串太长时有点，我需要在中选择。我知道，有可能使用 js ，但我希望得到light css 决定： p>

.select {box-sizing：border-box;显示：块;宽度：200px;身高：34.5px; padding：5px 22px 3px 11px; font：400 16px / 24px sans-serif;颜色：＃464a4c; vertical-align：middle;背景：#FFF URL（数据：图像/ SVG + xml的; BASE64，PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiID8 + CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyIiBoZWlnaHQ9IjciPgoJPGRlZnM + CgkJPGNsaXBQYXRoIGlkPSJjbGlwXzAiPgoJCQk8cmVjdCB4PSItNDE1IiB5PSItNjYyIiB3aWR0aD0iMTQzNyIgaGVpZ2h0PSIyMjE2IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KCQk8L2NsaXBQYXRoPgoJPC9kZWZzPgoJPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXBfMCkiPgoJCTxwYXRoIGZpbGw9InJnYig2NSw2NSw2NSkiIHN0cm9rZT0ibm9uZSIgZD0iTTAuNjUzNDQzIDQuNzY4MzdlLTA3TDExLjM0NjEgLTQuNzY4MzdlLTA3QzExLjk0MDIgLTQuNzY4MzdlLTA3IDEyLjE2ODIgMC41ODQ0ODggMTEuODY4MiAwLjkwNzY0OUw2LjU1MDMzIDYuNzE0MDRDNi4yNDczMSA3LjAzNjAzIDUuNzUzNzcgNy4xMTc3IDUuNDUwNzYgNi43OTQ1NEwwLjEzMjkxIDAuODY2ODE3Qy0wLjE3MDEwOSAwLjU0NDgyMyAwLjA2MjQwNTYgNC43NjgzN2UtMDcgMC42NTM0NDMgNC43NjgzN2UtMDciLz4KCTwvZz4KPC9zdmc + CG ==）无重复右6像素顶13像素; border：1px solid＃D6D6D6; border-radius：0; -moz-appearance：none; -webkit-appearance：none;溢出：隐藏;白色空间：nowrap; text-overflow：ellipsis}

< select class =选择> <选择的选项>选择密西西比密西西比密西西比密西西比密西西比< / option> < option value =1> 1密西西比密西西比密西西比密西西比密西西比< / option> < option value =2> 2密西西比密西西比密西西比密西西比密西西比< / option> < option value =3> 3 Mississippi Mississippi Mississippi Mississippi Mississippi< / option>< / select>< br>< div class =select> div密西西比密西西比密西西比密西西比密西西比< / div> / code>




解决方案

但你总是可以欺骗它，将选择内容封装在一个div中，并在伪元素之后使用：来定位一个假的 ... over 选择隐藏以下内容：



  .select {box-sizing：border-box;显示：块;宽度：200px;身高：34.5px; padding：5px 22px 3px 11px; font：400 16px / 24px sans-serif;颜色：＃464a4c; vertical-align：middle;背景：#FFF URL（数据：图像/ SVG + xml的; BASE64，PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiID8 + CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyIiBoZWlnaHQ9IjciPgoJPGRlZnM + CgkJPGNsaXBQYXRoIGlkPSJjbGlwXzAiPgoJCQk8cmVjdCB4PSItNDE1IiB5PSItNjYyIiB3aWR0aD0iMTQzNyIgaGVpZ2h0PSIyMjE2IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KCQk8L2NsaXBQYXRoPgoJPC9kZWZzPgoJPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXBfMCkiPgoJCTxwYXRoIGZpbGw9InJnYig2NSw2NSw2NSkiIHN0cm9rZT0ibm9uZSIgZD0iTTAuNjUzNDQzIDQuNzY4MzdlLTA3TDExLjM0NjEgLTQuNzY4MzdlLTA3QzExLjk0MDIgLTQuNzY4MzdlLTA3IDEyLjE2ODIgMC41ODQ0ODggMTEuODY4MiAwLjkwNzY0OUw2LjU1MDMzIDYuNzE0MDRDNi4yNDczMSA3LjAzNjAzIDUuNzUzNzcgNy4xMTc3IDUuNDUwNzYgNi43OTQ1NEwwLjEzMjkxIDAuODY2ODE3Qy0wLjE3MDEwOSAwLjU0NDgyMyAwLjA2MjQwNTYgNC43NjgzN2UtMDcgMC42NTM0NDMgNC43NjgzN2UtMDciLz4KCTwvZz4KPC9zdmc + CG ==）无重复右6像素顶13像素; border：1px solid＃D6D6D6; border-radius：0; -moz-appearance：none; -webkit-appearance：none; position：relative;} div {position：relative; display：inline-block;} div：after {content：'...';显示：块; background-color：#fff; height：15px;宽度：25px;颜色：＃464a4c;位置：绝对; right：23px;底部：11px; text-align：center; pointer-events：none;}  

< div>< ; select class =select> <选择的选项>选择密西西比密西西比密西西比密西西比密西西比< / option> < option value =1> 1密西西比密西西比密西西比密西西比密西西比< / option> < option value =2> 2密西西比密西西比密西西比密西西比密西西比< / option> <选项值=3> 3密西西比密西西比密西西比密西西比密西西比< / option>< / select>< / div>

我也为元素添加了 pointer-events：none; ，所以即使点击它它仍然会打开下面的选择。

Is it possible to make text-overflow: ellipsis; for select? In the divit is simple. When the string is too long there are dots, I need the same in select. I know, that it is possible with js, but I would like to get "light" css decision:

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

解决方案

Not the cleanest solution but you could always "trick" it, wrapping the select inside a div, and use :after pseudoelement to position a fake ... over the select hidding 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+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>

I have also added pointer-events: none; to the element so even if you click on it it will still open the select below.

这篇关于是否有可能使文本溢出：只用css选择省略号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！