仅使用CSS实现select下拉框的文字溢出省略号效果是否可能？

Question

仅使用CSS实现select下拉框的文字溢出省略号效果是否可能？

6

是否可以对中也能实现同样的效果。我知道可以使用js来实现，但我想要一个“轻量级”的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>

- kizoso

1

不可以，text-overflow 只能应用于块级元素：https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-overflow - Sean

1

HTML没有为select提供那个属性。此外，大多数浏览器都有自己不同的显示HTML标签的方式。你可以使用一些JS/CSS库，例如https://harvesthq.github.io/chosen/或https://silviomoreto.github.io/bootstrap-select/。 - Atilla Arda Açıkgöz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alvaro Menéndez · Accepted Answer

虽然不是最干净的解决方案，但您可以“欺骗”它，将选择框包装在一个 div 中，并使用 :after 伪元素来定位一个假的 ... 覆盖在 select 上面，隐藏下面的内容：

.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;添加到元素中，这样即使您单击它，下面的选择仍然会打开。