HTML：换行无效

Question

我基本上只想在列表元素内的新行上显示本地存储的每个条目。

这是我的 JS：

if ( counter == 1 ){
var json = JSON.parse(localStorage.getItem( localStorage.key( i )))
var textm = 'Entry:'+json.Entry+'\n Exercise: '+json.Exercise+'\n Date:'+json.Date+'\n Start: ' +json.Start+'\n End: '+json.End+'\n Calories: '+json.Calories;
 var ul = document.getElementById("list");
 var li = document.createElement("li");

 li.appendChild(document.createTextNode(textm));
 ul.appendChild(li);


};

我知道很久了，但这是我收到的输出：

这是什么原因？我不使用换行符吗？或者可能是我的 CSS？

Answer 1

除非您使用 <pre> 元素或等效的 CSS 格式，否则浏览器会将换行符视为 space，并将多个白色 space 字符压缩为单个 space。要让您的字段显示在不同的行上，您需要插入   换行符元素而不是换行符。（或者使用嵌套列表，或者将每个 "line" 包装在  元素中，或其他任何东西。但是只使用   元素是最简单的。）

除了因为您使用 .createTextNode() 设置文本，只需在您的字符串中包含 " " 将显示这些字符而不是创建一个元素。最简单的解决方案是设置 <li> 元素的 .innerHTML 而不是使用 .createTextNode():

if (counter == 1) {
  var json = JSON.parse(localStorage.getItem(localStorage.key(i)))
  var textm = 'Entry:' + json.Entry + '<br> Exercise: ' + json.Exercise + '<br> Date:' + json.Date
            + '<br> Start: ' + json.Start + '<br> End: ' + json.End + '<br> Calories: ' + json.Calories;
  var ul = document.getElementById("list");
  var li = document.createElement("li");

  li.innerHTML = textm;
  ul.appendChild(li);
}

顺便说一句，在 if 块的 } 结束后不需要分号。另外，假设上面的代码包含在一个循环中，将带有 var ul = document.getElementById("list"); 的行移动到循环之前会更有效，这样您只需要查找该元素一次而不是在每次循环迭代时都查找该元素.

Answer 2

使用   而非 \n 更新您的文本连接，如下所示。

var textm = 'Entry:'+json.Entry+'<br/> Exercise: '+json.Exercise+'<br/> Date:'+json.Date+'<br/> Start: ' +json.Start+'<br/> End: '+json.End+'<br/> Calories: '+json.Calories;

li.innerHTML = textm;

Answer 3

在 html 中，如 W3Schools 所说，对于断行，我们必须使用
而不是 \n（或任何其他字符）。我希望这会有所帮助:)

Answer 4

这是你的灵魂

您需要创建元素。你不能将它作为字符串传递

示例：document.createElement("br");

if ( counter == 1 ){
    var json = JSON.parse(localStorage.getItem( localStorage.key( i )))
    var textm = 'Entry:'+json.Entry+document.createElement("br")+' Exercise: '+json.Exercise+'\n Date:'+json.Date+'\n Start: ' +json.Start+'\n End: '+json.End+'\n Calories: '+json.Calories;
     var ul = document.getElementById("list");
     var li = document.createElement("li");

     li.appendChild(document.createTextNode(textm));
     ul.appendChild(li);


    };

HTML：换行无效

HTML: New Line not working

html

javascript

css

line-breaks