禁用 <p> 标签自动修剪文本

Question

我在 var 中有一些文本。var text = " Hell O "。文本的每个字符都包含在 span 标签中，给定一个 id，然后附加到 ap 标签的 innerhtml 中。然后使用函数对每个跨度进行样式设置（在事件上）。

问题是 p 标记开头或结尾的任何空格都没有突出显示。我不确定 p 标签是否忽略空格并且不将它们包含在最后的 para 中。但似乎确实不包括第一个/最后一个空格。

顺便说一句，这是我的造型功能。

function highlightLetter(typedletter) {
        var targetId = "h"+( typedletter );
        makeGreen = document.getElementById(targetId) ;
        if (makeGreen) {
            console.log(makeGreen.innerText.charCodeAt(0)) ;
            if (makeGreen.innerText.indexOf(String.fromCharCode(10)) == -1 ) {
                makeGreen.style.background  = "lightgreen" ;
            }

        }
    }

有任何想法吗 ？

谢谢

Answer 1

不会呈现段落开头和结尾处的空白。此外，段落内的空白序列也会被折叠。

如果您希望渲染所有空白，请使用不间断空格实体 。请注意，这会影响换行，并可能导致水平滚动，否则换行。

您可以将所有普通空白字符替换为不间断空格，如下所示：

var text = " Hell O ";
text.replace(/ /g, " ");

或者，您也可以使用<pre>...</pre>标签。