How can I create a multi-line splash screen?

I’m trying to create a basic splashscreen for a website but for some reason only 1 line of text is showing up on the splashscreen, and not the remaining text within the <p> tag. Here is a codepen of the problem: Here is a codepen of the problem.

const splash = document.querySelector('.splash');

document.addEventListener('DOMContentLoaded', (e) => {
  setTimeout(() => {
    splash.classList.add('display-none');
  }, 5000);
})

.splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 9999;
  color: white;
  text-align: center;
  line-height: 90vh;
}

.splash.display-none {
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 9999;
  color: white;
  text-align: center;
  line-height: 90vh;
  transition: 0.5s;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

<html>

<head>
  <div class="splash">
    <p class="fade-in">Hi there! This splashscreen is broken!<br> I can't see this line!<br> I can't see this line either!<br> This line is also missing too!</p>
  </div>

  <p>hello world</p>

I’m sure it’s a relatively simple fix, just a bit stumped on this one.

Answer

This is because of the huge amount of line-height that you have given to your <p> tag so each line will occupy 90vh so it will be out of the screen. If you want your text to have appeared in the middle of the element with class splash you can use flexbox to achieve this instead of line-height.

All you have to do is to set the element with splash class display: flex; and then with justify-content and align-items attribute position it to center horizontally and vertically.

So your final code should be something like this:

const splash = document.querySelector('.splash');

document.addEventListener('DOMContentLoaded', (e) => {
  setTimeout(() => {
    splash.classList.add('display-none');
  }, 5000);
})

.splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 9999;
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.splash.display-none {
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 9999;
  color: white;
  text-align: center;
  line-height: 90vh;
  transition: 0.5s;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

<div class="splash">
  <p class="fade-in">Hi there! This splashscreen is broken!<br> I can't see this line!<br> I can't see this line either!<br> This line is also missing too!</p>
</div>

<p>hello world</p>