文字列テンプレート - 新しい行が表示されない

Question

テンプレート文字列を使用してinfoDivのテキストを更新しようとしていますが、何らかの理由でこのテキストがすべて1行にあります。私は間違って何をしていますか？ theseのソリューションは動作しません。レンダリングされたばかりです。

infoDiv.textContent = `Hi! 
It's a ${counter} question quiz. 
It takes about ${time_minutes} minutes to solve it. 
Are you ready?` 

EDIT：

私は、CSSのソリューションhere（white-space: pre-line;）を発見しました。

let counter = 8; 
 
let time_minutes = 3; 
 

 
infoDiv.textContent = `Hi! 
 
It's a ${counter} question quiz. 
 
It takes about ${time_minutes} minutes to solve it. 
 
Are you ready?`

<div id="infoDiv" style="white-space: pre-line"></div>

Answer 1

スタイルwhite-space CSSプロパティを持つdiv要素。

const counter = 22; 
 
const time_minutes = 60; 
 

 
infoDiv.textContent = `Hi! 
 
It's a ${counter} question quiz. 
 
It takes about ${time_minutes} minutes to solve it. 
 
Are you ready?`

<div id="infoDiv" style="white-space: pre-wrap"></div>