使用Javascript更改行元素，同時保持1行中的所有內容

Question

我正在使用Javascript將一些文本添加到網頁的多個<td>元素，但問題在於，當我添加文本時，它跨越2行而不是1行。

我怎樣才能讓它保持在一條線上，我不介意元素變寬。

Here是我修改了頁面，這裏是我的代碼：

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

這裏是什麼樣子。

有沒有一種方法，使其在同一行？

Answer 1

在CSS中，你可以做一些沿

td { 
    white-space: nowrap; 
} 

http://www.w3schools.com/cssref/pr_text_white-space.asp

編輯

我注意到了線，在例子中，是TD，裏面<div>其是一個塊元素，強制下一行（您要添加的）到下一行。如果您使用空格：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"; 
} 

，或者您需要到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 += " - ##"; 
} 

Answer 2

我不要認爲這是一個腳本問題，而是一個間距問題，可能是<td>單元太小，並自動顯示其內容兩行。事實上，正如我用jQuery編寫的這個JSFiddle所示，內容只是一行。

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

Answer 3

對於你將它添加一個塊級元素之外，所以你需要做首發：

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

那麼你可以使用空格：NOWRAP;在你不想包裝的元素上