HTML line break doesn't execute a line break-CodePudding

I am working on a text-based game, and in part of the text, it doesn't create a new line.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      body {
        background-color: black;
      }
      p {
        color: white;
        font-family: "Courier";
        font-size: 20px;
        margin: 10px 0 0 10px;
        white-space: nowrap;
        overflow: hidden;
        width: 30em;
        animation: type 4s steps(60, end);
      }


      @keyframes type{
        from { width: 0; }
      }
    </style>
  </head>
  <body>
    <p >Welcome, unsuspectful human. \nWhat is your name?</p> 

  </body>
</html>

But the outcome is this:

Welcome, unsuspectful human. \nWhat is your name?

For some reason, \n doesn't make the extra line. I would have separate <p>'s but the text appears at the same time? I don't really know how to explain it.

Here is the page I have: https://codepen.io/superduperamazing/pen/bGoOXjr

CodePudding user response：

Use <br /> tag instead

  <body>
    <p >Welcome, unsuspectful human. <br /> What is your name?</p> 
  </body>

CodePudding user response：

There are a few ways to add a line break depending on your use case...

<br /> HTML line break element
\n end-of-line Unix-like systems
\r\n end-of-line in Windows

If this is strictly web based then use <br />