如何防止JavaScript中的单词中断

Question

我有一张可排序的表格，我正在添加一种方法来向您展示已排序的列。

实施非常基础;如果您单击未排序的列标题，它会在标题名称后附加一个▲（\u25b2）。如果它已经排序，则用▼（\u25bc）替换▲，反之亦然。这都是用JavaScript完成的。​​

以下是我的代码：

var headerContents = header.innerHTML;

if(headerContents.indexOf('\u25b2') != -1)
    headerContents = headerContents.substring(0, headerContents.length - 1) + '\u25bc';
else if(headerContents.indexOf('\u25bc') != -1)
    headerContents = headerContents.substring(0, headerContents.length - 1) + '\u25b2';
else
    headerContents = headerContents + '\u25b2';

header.innerHTML = headerContents;

我的问题是箭头被计为一个单独的单词（或者至少是单词可以断开的地方），所以在窄列中箭头在标题名称下面有自己的行。这看起来很糟糕。

有没有办法可以强制箭头与标题名称保持同一条线？如果可能的话，我喜欢将它保存在纯JavaScript中，因为我有许多项目使用相同的JS脚本，我想将其添加到。但是，如果仅在JavaScript中这是不可能的，我可以接受其他解决方案。

我尝试在标题和箭头之间添加一个不间断的空格（\xa0），我尝试编辑标题的word-break属性，但都没有更改这种行为。