添加css类后选择选项文本部分消失答案

【问题标题】：Select option text disappears partially after adding css class添加css类后选择选项文本部分消失
【发布时间】：2017-04-02 18:39:52
【问题描述】：

$("button").on("click", function() {
	$("select option").each(function() {
  	$(this).addClass("heavyError");
  });
  $("select option:selected").attr("selected", false);
});

.heavyError {
  color: red;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select style="width:480px; height:100px;" multiple>
<option value="test-ss">test-ss</option>
</select>
<button>test</button>

如果在 IE 中运行，文本会被连字符截断，但在 Chrome 中可以正常工作。不知道这里发生了什么。是 IE 的错误还是某种错误？

【问题讨论】：

是的，我认为这是 IE 的问题（选择选项和多个）
我尝试了这种方法并登陆github.com/angular/angular.js/issues/11314
什么版本的IE？
@epascarello IE11。有趣的是，我无法用 IE9 重现此问题。
在 IE11 上我可以看到粗体字体值在 Computed 选项卡中被转换为 700

标签： javascript jquery html css internet-explorer

【解决方案1】：

将' ' 附加到select 将强制选择“刷新”，并修复IE11 中的问题。见这里：https://jsfiddle.net/9kvcqc05/

$("button").on("click", function() {
	$("select option").each(function() {
  	$(this).addClass("heavyError");
  });
 
  $("select option:selected").attr("selected", false);
  $("select").append(' ');
});

.heavyError {
  color: red;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select style="width:480px; height:100px;" multiple>
<option value="test-ss">test-ss</option>
</select>
<button>test</button>

这似乎只是一个奇怪的 IE 特有的错误。

我通过引用 Jordan Gray 的 this great answer 解决了这个问题。

【讨论】：

【解决方案2】：

我能想到的最好的结果是 IE 试图在连字符上换行选项的文本，因为粗体样式增加了它的宽度。

这是一个较长文本的示例：

$("button").on("click", function() {
  $("select option").each(function() {
    $(this).addClass("heavyError");
  });
});

.heavyError {
  color: red;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select style="width:480px; height:100px;" multiple>
  <option value="test-ss">test-loremipsum</option>
</select>
<button>test</button>

快速解决方法是在元素上附加一个空格：

$("button").on("click", function() {
  $("select option").each(function() {
    $(this).text($(this).text() + ' ');
    $(this).addClass("heavyError");
  });
});

.heavyError {
  color: red;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select style="width:480px; height:100px;" multiple>
  <option value="test-ss">test-loremipsum</option>
</select>
<button>test</button>

【讨论】：