CSS text-overflow: ellipsis;在Firefox中工作，但在Google Chrome和Oper

Question

我想限制下拉列表选项中的文本长度，为此html和css样式如下。它在Firefox浏览器中工作得很好，但在Google Chrome和Opera浏览器中不起作用。

<div class="select">
 <select name="option[1381]" id="input-option1381" class="form-control ">
  <option value=""> --- Please Select --- </option>
  <option value="5051" data-engraving="Checkered Clipboard Clip"> Checkered Clipboard Clip  (+$1.50)</option>
  <option value="5050" data-engraving="Blackout Clipboard Clip"> Blackout Clipboard Clip (+$1.50)</option>
 </select>
</div>
<style type="text/css">
.select select {
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

原因是什么?我不知道为什么它不能在opera和chrome中工作。请帮助。

Answer 1

你不能(可靠地)应用text-overflow:ellipsis;到<select>元素或它们的<option> s。所以，我通过添加一些额外的填充物解决了这个问题。这样文本就不会有机会碰到箭头，因为它不能进入填充区域。问题解决了!

<div class="select">
 <select name="option[1381]" id="input-option1381" class="form-control ">
  <option value=""> --- Please Select --- </option>
  <option value="5051" data-engraving="Checkered Clipboard Clip"> Checkered Clipboard Clip  (+$1.50)</option>
  <option value="5050" data-engraving="Blackout Clipboard Clip"> Blackout Clipboard Clip (+$1.50)</option>
 </select>
</div>
<style type="text/css">
.select select {
  padding-right:35px;
}
</style>