Question

我有这个问题：我正在使用多选列表作为选项，当文本很长时我会剪切它。

white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;

现在问题是：在firefox列表中禁用滚动键，同时使用该CSS。我的意思是你仍然可以用鼠标滚动，但如果你选择带有向上和向下键的选项，列表将不会滚动，它将超出界限...在Chrome上它可以正常工作。并且Safari不会删除文本...有没有办法解决这个问题？我实际上使用Meteor和ng-option。

body{
  scrollbar-base-color: #C0C0C0;
  scrollbar-base-color: #C0C0C0;
  scrollbar-3dlight-color: #C0C0C0;
  scrollbar-highlight-color: #C0C0C0;
  scrollbar-track-color: #EBEBEB;
  scrollbar-arrow-color: black;
  scrollbar-shadow-color: #C0C0C0;
  scrollbar-dark-shadow-color: #C0C0C0;
}

.testSelectList  {
  width: 100px;
}
.testSelectListOption {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

::-webkit-scrollbar { width: 0px; height: 0px;}
::-webkit-scrollbar-button {  background-color: #666; }
::-webkit-scrollbar-track {  background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 0px; background-color: #666; border-radius: 0px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<select class="testSelectList" multiple="multiple" size="6" >
  <option class="testSelectListOption">11111111111111111111111111111111111111111</option>
  <option class="testSelectListOption">22222222222222222222222222222222222222222</option>
  <option class="testSelectListOption">33333333333333333333333333333333333333333</option>
  <option class="testSelectListOption">44444444444444444444444444444444444444444</option>
  <option class="testSelectListOption">55555555555555555555555555555555555555555</option>
  <option class="testSelectListOption">66666666666666666666666666666666666666666</option>
  <option class="testSelectListOption">77777777777777777777777777777777777777777</option>
  <option class="testSelectListOption">88888888888888888888888888888888888888888</option>
  <option class="testSelectListOption">99999999999999999999999999999999999999999</option>
</select>

在多选列表FIREFOX，SAFARI中剪切文本

0 个答案: