使用Javascript更改行元素，同时将所有内容保持在一行中

我目前正在使用Javascript向网页的多个

元素添加一些文本，但问题是，当我添加文本时，它跨越了2行而不是1行

我如何使它保持在一条线上，我不介意元素是否变宽

是我正在修改的页面，下面是我的代码：

var Opp = document.querySelectorAll('td.P-xs')
for(i=0;i<Opp.length;i++){
    Opp[i].innerHTML = Opp[i].innerHTML + " - ##"
}

var Opp=document.querySelectorAll（'td.P-xs'））
对于CSS中的（i=0；i，您可以按照

td {
    white-space: nowrap;
}


编辑

我注意到，在示例中，td中有一个
，它是一个块元素，强制下一个文本（您正在添加）到下一行。如果使用空格：nowrap，它只影响内联（或内联块）元素。因此，您需要创建div内联块，即

td {
    white-space: nowrap;
}
td div {
    display: inline-block; /* inline would also work in this case */
}

或通过JS：

var Opp = document.querySelectorAll('td.P-xs');
for(var i = 0; i < Opp.length; i++){
    Opp[i].innerHTML = Opp[i].innerHTML + " - ##";

    Opp[i].style.whiteSpace = "no-wrap";
    Opp[i].firstElementChild.style.display = "inline-block";
}

var Opp=document.querySelectorAll（'td.P-xs'）；
对于（变量i=0；i

或者您需要在div中添加文本，即

var Opp = document.querySelectorAll('td.P-xs');
for(var i = 0; i < Opp.length; i++){
    Opp[i].style.whiteSpace = "no-wrap";
    Opp[i].firstElementChild.innerHTML += " - ##";
}

var Opp=document.querySelectorAll（'td.P-xs'）；
对于（变量i=0；i
在CSS中，您可以按照

td {
    white-space: nowrap;
}


编辑

我注意到，在示例中，td中有一个
，它是一个块元素，强制下一个文本（您正在添加）到下一行。如果使用空格：nowrap，它只影响内联（或内联块）元素。因此，您需要创建div内联块，即

td {
    white-space: nowrap;
}
td div {
    display: inline-block; /* inline would also work in this case */
}

或通过JS：

var Opp = document.querySelectorAll('td.P-xs');
for(var i = 0; i < Opp.length; i++){
    Opp[i].innerHTML = Opp[i].innerHTML + " - ##";

    Opp[i].style.whiteSpace = "no-wrap";
    Opp[i].firstElementChild.style.display = "inline-block";
}

var Opp=document.querySelectorAll（'td.P-xs'）；
对于（变量i=0；i

或者您需要在div中添加文本，即

var Opp = document.querySelectorAll('td.P-xs');
for(var i = 0; i < Opp.length; i++){
    Opp[i].style.whiteSpace = "no-wrap";
    Opp[i].firstElementChild.innerHTML += " - ##";
}

var Opp=document.querySelectorAll（'td.P-xs'）；
对于（变量i=0；i
我认为这不是脚本问题，而是间距问题，可能是
单元格太小，自动在两行上显示内容。事实上，正如我用jQuery编写的这篇文章所示，内容只显示在一行上

$.each($('td.P-xs'), function(){
   $(this).append(' - ##');
});

我不认为这是一个脚本问题，而是一个间距问题，可能是
单元格太小，自动在两行上显示其内容。事实上，正如我用jQuery编写的这篇文章所示，内容放在一行上

$.each($('td.P-xs'), function(){
   $(this).append(' - ##');
});

对于初学者，可以在块元素之外添加它，因此需要执行以下操作：

var Opp = document.querySelectorAll('td.P-xs')
for(i=0;i<Opp.length;i++){
    Opp[i].firstElementChild.innerHTML = Opp[i].firstElementChild.innerHTML + " - ##"
 }

var Opp=document.querySelectorAll（'td.P-xs'））
对于（i=0；i对于初学者，可以在块元素之外添加它，因此需要执行以下操作：

var Opp = document.querySelectorAll('td.P-xs')
for(i=0;i<Opp.length;i++){
    Opp[i].firstElementChild.innerHTML = Opp[i].firstElementChild.innerHTML + " - ##"
 }

var Opp=document.querySelectorAll（'td.P-xs'））
对于（i=0；我对此表示感谢。我最终在循环之外做了
$（“td.P-xs”）.css（“空白”、“nowrap”）；
谢谢。我最终在循环之外做了
$（“td.P-xs”）.css（“空白”、“nowrap”）；