Как добавить разрывы строк во внутреннем HTML javascript

Question

Мне было интересно, как я могу добавить разрывы строк в нечто подобное.

document.getElementById("Lyrics").innerHTML = ("Cras sed gravida augue,  in elementum velit. Proin vel libero gravida, luctus elit at, auctor mauris. Morbi ultricies auctor blandit. Praesent eget leo ac ipsum condimentum finibus vitae ac nisi. Suspendisse a nisi sed metus commodo sagittis. Nulla varius aliquam nisi, sit amet mattis elit malesuada ac. Maecenas vulputate massa velit, quis volutpat nunc fringilla quis. Cras eu ex sed erat venenatis rutrum. Suspendisse ac dui metus. Sed cursus sodales quam sed luctus. Pellentesque magna quam, vulputate non nulla eget, aliquam ultricies lacus. Maecenas vehicula id quam a interdum. Donec laoreet nec mauris at bibendum. Donec molestie condimentum ullamcorper. ");

Я делаю это для школьного проекта для начинающих, поэтому вместо этого планирую добавить тексты песен.

Answer 1

Если вы имеете в виду рендеринг самого html в несколько строк, вы можете использовать html между частями предложения.

Например,

document.getElementById("Lyrics").innerHTML = ("Cras sed gravida augue,  <br /> in elementum velit. <br />Proin vel libero gravida, luctus elit at, auctor mauris. Morbi ultricies auctor blandit. Praesent eget leo ac ipsum condimentum finibus vitae ac nisi. Suspendisse a nisi sed metus commodo sagittis. Nulla varius aliquam nisi, sit amet mattis elit malesuada ac. <br />Maecenas vulputate massa velit, quis volutpat nunc fringilla quis. Cras eu ex sed erat venenatis rutrum. Suspendisse ac dui metus. Sed cursus sodales quam sed luctus. Pellentesque magna quam, vulputate non nulla eget, aliquam ultricies lacus. Maecenas vehicula id quam a interdum. Donec laoreet nec mauris at bibendum. Donec molestie condimentum ullamcorper. ");

Вы также можете использовать любые другие теги html в кавычках. Надеюсь, это поможет!

Answer 2

Просто добавьте <br> между предложениями или заключите каждое из них в <p>. Вы также можете добавить \n, если содержащий элемент - <pre> или использует white-space: pre или white-space: pre-line:

document.getElementById("container1").innerHTML = "Cras sed gravida augue, in elementum velit.<br>Proin vel libero gravida, luctus elit at, auctor mauris.<br>Morbi ultricies auctor blandit. Praesent eget leo ac ipsum condimentum finibus vitae ac nisi.";

document.getElementById("container2").innerHTML = "<p>Cras sed gravida augue, in elementum velit.</p><p>Proin vel libero gravida, luctus elit at, auctor mauris.</p><p>Morbi ultricies auctor blandit. Praesent eget leo ac ipsum condimentum finibus vitae ac nisi.</p>";

document.getElementById("container3").innerHTML = "Cras sed gravida augue, in elementum velit.\nProin vel libero gravida, luctus elit at, auctor mauris.\nMorbi ultricies auctor blandit. Praesent eget leo ac ipsum condimentum finibus vitae ac nisi.";

document.getElementById("container4").innerHTML = "Cras sed gravida augue, in elementum velit.\nProin vel libero gravida, luctus elit at, auctor mauris.\nMorbi ultricies auctor blandit. Praesent eget leo ac ipsum condimentum finibus vitae ac nisi.";

body {
  margin: 0;
  font-family: sans-serif;
}

div, pre {
  border-bottom: 3px solid black;
  overflow: hidden;
  max-width: 100%;
}

#container3 {
  white-space: pre-line;
}