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

你不能（可靠地）应用文本溢出：省略号;到<select>个元素或<option>个。所以，我通过添加一些额外的填充权来解决了这个问题。这样，文本就没有机会进入箭头，因为它无法进入填充区域。问题解决了！

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

CSS文本溢出：省略号;正在使用Firefox但在谷歌浏览器和Opera浏览器的下拉列表中没有工作？

1 个答案: