我的数组包含一个空格 [" "]。当我 .join 带有下划线的空格时，结果字符串中的空格元素在 html 中不可见

Posted 2023-05-07

技术标签:

【中文标题】我的数组包含一个空格 [" "]。当我 .join 带有下划线的空格时，结果字符串中的空格元素在 html 中不可见【英文标题】：My array contains a blank space [" "]. When I .join the space with underscores, the space element in the resulting string is not visible in the html 【发布时间】：2019-10-29 17:08:20 【问题描述】：

在控制台中显示时，我在 p 标签之间得到的结果包含索引 3 中的空格，这是正确的。

但是当显示在页面上时，我得到“_ _ _ _”。索引 3 中的空间不可见。这是CodePen。

如何在页面上显示下划线之间的空格？我什至无法在这里展示空间！它显示为“_ _ _ _”。下划线 2 和 3 之间应该有一个空格！

非常感谢！

.toString 而不是 .join 没有区别。

.textContent 代替 .innerhtml 也没什么区别。

<html>
  <p id="myid"></p>

  <script>
    var myArray = ["_", "_", " ", "_", "_"];
    var hiddenWord = document.getElementById('myid');
    var temp;

    function newGame() 
      temp = myArray.join(" ");
      hiddenWord.innerHTML = temp;
    

    newGame();
    console.log("temp variable", temp);
    console.log(myArray);
  </script>
</html>

【问题讨论】：

我认为你需要使用 <pre> 标签，因为 HTML 通常会忽略额外的空格 Concatenated white space does not display in result的可能重复感谢您的回答！我将使用“ ”，因为它对我的实现更简洁。 【参考方案1】：

在呈现 HTML 时，通常一系列空白区域会折叠为单个空白区域。在元素上使用white-space: pre; 以保留空格序列：

var myArray = ["_", "_", " ", "_", "_"];
var hiddenWord = document.getElementById('myid');
var temp;

function newGame() 
  temp = myArray.join(" ");
  hiddenWord.innerHTML = temp;


newGame();

#myid 
  white-space: pre;

&lt;p id="myid"&gt;&lt;/p&gt;

【讨论】：

很好的答案。不知道white-space: pre; 存在。这会比&nbsp;“更好”或更有用吗？我不确定这更好或更有用。在很多情况下，您可以从 JS/CSS/HTML 的角度解决问题。在这种情况下，white-space: pre; 是 CSS 解决方案。当您可以通过 CSS 属性本身解决问题时，最好使用 CSS 来解决，这就是它的设计目的，Better or Worse: Styling with javascript vs CSS @CodeManiac 我大体上同意那篇文章，但我相信也有一些例外。在这种情况下，这并不是真正的“样式问题”，而是存在多个空格时的渲染问题。我更想说&nbsp; 解决方案将“更”适应。当然是我个人的看法。【参考方案2】：

许多空格在 HTML 中呈现为单个空格，就像所有其他空格一样。要解决这个问题，您可以使用不间断空格 &nbsp;，它会提供所需的空间。

function newGame() 
    temp = myArray.join(" ").replace(/\s/g, '&nbsp;');
    hiddenWord.innerHTML = temp;
 

var myArray = ["_", "_"," ","_","_"],
    hiddenWord = document.getElementById('myid'),
    temp;

newGame();
console.log("temp variable", temp);
console.log(myArray);