Html 防止在动态加载的选项中换行

我有一个表格的一部分，有一系列的问题/答案，其中一些是选择下拉列表。使用单个“虚拟”选项加载这些选项，然后通过ajax调用加载实际选项

其中一个正在导致一些包裹发生。我模拟了这个代码笔中的情况：

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="leftColumn">
  <ul>
    <li class="dataRow clearFix" data-questionid="1">
      <div class="dataQuestion">Question:</div>
      <div class="dataAnswer">
        <select class="dataDropDown">
          <option value="0">Select ...</option>
        </select>
      </div>
    </li>
    <li class="dataRow clearFix" data-questionid="2">
      <div class="dataQuestion">Hi there:</div>
      <div class="dataAnswer">
        <input class="dataText" type="text" />
      </div>
    </li>
  </ul>
</div>
<input type="button" value="Click Me!" onclick="LoadOptions();" />

JavaScript

function LoadOptions()
{
  var $newOption = $('<option value="1">This is a really long answer</option>');
  $('.dataRow[data-questionid="1"]').find('.dataAnswer select').append($newOption);
}

函数加载选项（）
{
var$newOption=$（“这是一个很长的答案”）；
$（'.dataRow[data questionid=“1”]'）。查找（'.dataAnswer select'）。追加（$newOption）；
}

单击“单击我！”按钮将模拟加载导致包装的长项目

提前感谢您的帮助

---

Evan

如其他地方所述，您可以使用

li

上的溢出滚动条与

空白：nowrap

组合使用，以强制内联元素不中断。在这里，我用span替换了您的

dataAnswer

div

函数加载选项（）{
var$newOption=$（“这是一个很长的答案”）；
$（'.dataRow[data questionid=“1”]'）。查找（'.dataAnswer select'）。追加（$newOption）；
}

.clearFix:after{
显示：表格；
明确：两者皆有；
内容：“；
}
.leftColumn{
背景色：#BAE6FF；
宽度：15em；
显示：块；
填充：0.5em0；
边缘底部：1米；
溢出：自动；
}
保险商实验室{
保证金：0；
填充：0；
}
李{
列表样式：无；
列表样式类型：无；
高度：2米；
清除：左；
空白：nowrap；
}
.数据问题{
显示：内联块；
最小宽度：4em；
左边距：0.25em；
}
dataAnswer{}.dataDropDown{}.dataText{
宽度：5em；
}

问题:
选择。。。


你好：

Simple：您的

15em

容器不够宽，无法容纳标签和选择项。考虑将<代码>宽度<代码>应用到选择元素以强制其大小适合。@问题的部分是这里的一切都是动态的。他们可以调整.leftColumn div的大小，我无法知道将加载到选项元素中的内容。在我的应用程序中使其工作仍然存在一些问题，但我不能否认它在代码段中工作。谢谢

function LoadOptions()
{
  var $newOption = $('<option value="1">This is a really long answer</option>');
  $('.dataRow[data-questionid="1"]').find('.dataAnswer select').append($newOption);
}