html - 如何防止它在 html 中换行？

Question

我在 html 中有以下代码，它创建了这个:

<input type="checkbox" id="cb5" class="listDropDown" onchange="selectPopulationChanged()" display="inline" value="complex ab. karyotype">
<label for="cb5" class="listDropDown" display="inline">complex ab. karyotype</label>

在他的示例中，由于“complex ab.karyotype”中的空格，它决定将所有文本从复选标记下方的 label 标签中移出。

我怎样才能阻止它这样做。我在图片上的弹出窗口包含我发布的代码，它被多次用于创建列表。这个特定元素与其他元素(长度除外)之间的唯一区别是空格。我已经通过包含一个非常长且没有空格的 elemtn 进行了测试，并且它不会将其放在新行上。

非常感谢任何帮助!

编辑 - 添加了以下内容

HTML:

<div class="dropdown" style="display:inline">
    <button data-toggle="dropdown" class="btn btn-success" type="button" id="pops" >Select Populations</button>
    <ul id="popupDropDown" class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    </ul>
</div>

CSS:

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

jQuery:

function addCheckboxes() {
    $("#popupDropDown").empty();
    for(i=0; i<arrayValues.length; i++)
    {
        var container = $('#popupDropDown');
        var inputs = container.find('input');
        var id = inputs.length+1;
        $('<input />', { type: 'checkbox', 'id': 'cb'+id, 'class': 'listDropDown', 'onChange': 'selectPopulationChanged()', 'display':'inline', value: arrayValues[i] }).appendTo(container);
        $('<label />', { 'for': 'cb'+id, 'class': 'listDropDown', 'display':'inline', text: arrayValues[i] }).appendTo(container);
        $('</br>').appendTo(container);
        $('#cb'+id).prop('checked', true);
    }
}

Answer 1

在您的 for 中尝试此代码循环(替换所述循环的所有现有内容):

var container = document.getElementById('popupDropDown');
var label = document.createElement('label');
label.className = "listDropDown";

var input = document.createElement('input');
input.type = "checkbox";
input.className = "listDropDown";
input.onchange = selectPopulationChanged;
input.value = arrayValues[i];

label.appendChild(input);
label.appendChild(document.createTextNode(arrayValues[i]));

container.appendChild(label);

这会将复选框放在 <label> 中，正如我在评论中提到的那样，完成后你应该能够使用 white-space:nowrap在您的标签元素上以防止换行。另外，添加 display:block标签以避免需要 <br />标签。

Vanilla JS可能需要更多的写作，但我个人觉得这比你非常大的 jQuery 生成的东西更容易阅读。