jquery - 如何在 Firefox 中将文本保留在一行上？

我正在使用 JQuery 1.11。我正在尝试创建一个样式化的选择菜单，它会根据最大元素的宽度自动调整其宽度。我有

<div class="profileField">
    Birthday<br/>
    <select id="user_dob_2i" name="user[dob(2i)]">
<option value="">Select Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>

然后我使用以下 CSS

.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: #fff;
  width: 220px;
  height: 42px;
}

.select-styled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: gray;
  padding: 11px 12px;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.select-styled:after {
  content: "";
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 16px;
  right: 10px;
}

.select-styled:hover {
  background-color: #7b7b7b;
}

.select-styled:active, .select-styled.active {
  background-color: #737373;
}

.select-styled:active:after, .select-styled.active:after {
  top: 9px;
  border-color: transparent transparent #fff transparent;
}

.select-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #737373;
  overflow: scroll;
}

.select-options li {
  margin: 0;
  padding: 12px 0;
  text-indent: 15px;
  border-top: 1px solid #676767;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}

.select-options li:hover {
  color: gray;
  background: #fff;
}

.select-options li[rel="hide"] {
  display: none;
}

ul.select-options {
  max-height: 15em;
  overflow-y: scroll;
  overflow-x: hidden;
}

但是，我无法弄清楚如何将所有默认选项文本保留在一行中。如果您查看我的 JSFiddle — http://jsfiddle.net/m5bxbx6d/1/ ，您会注意到“选择月份”在 Mac Firefox 上变成了两行。在 Chrome 和 Safari 上，文本都在一行上。如何让 Firefox 的所有内容都集中在一行？

我不想对宽度进行硬编码，因为我希望这段代码足够通用以适用于我想要设置样式的任何菜单。

最佳答案

您的选择正在中断，因为您没有使宽度足够宽。

快速解决方法是使用不间断空格 (   )。您可以对它们进行硬编码，也可以像这样以编程方式添加它们:

$(selectMenu).children('option').each(function(){
    $(this).html($(this).html().replace(" ", " "));
});

Example 1

真正的解决方法是固定您的宽度。您的计算是错误的，因为您没有使用 outerWidth() 并且因为您在测量后添加了类。首先添加您的类，以便获得准确的测量值，然后使用 outerWidth() 而不是 width()，它应该可以工作。

$this.addClass('select-hidden');
var paddingWidth = $paddingCalculator.outerWidth() + 10;
$paddingCalculator.remove();
var selectWidth = $this.outerWidth() + paddingWidth;

Example 2

关于jquery - 如何在 Firefox 中将文本保留在一行上？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39798315/