如何创建多行启动画面？

Question

我正在尝试为网站创建一个基本的启动画面，但由于某种原因，启动画面上只显示了 1 行文本，而没有显示 <p> 标签中的其余文本。这是问题的代码笔： Here is a codepen 的问题。

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>

我确定这是一个相对简单的修复，只是在这个问题上有点难过。

Answer 1

删除 .splash css

中 line-height: 90vh; 的行

Answer 2

这是因为大量的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而不是line-height。

您所要做的就是使用 splash class display: flex; 设置元素，然后使用 justify-content 和 align-items 属性将其定位到中心水平和垂直。

所以你的最终代码应该是这样的：

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>

如何创建多行启动画面？

How can I create a multi-line splash screen?

html

javascript

css

splash-screen