如何创建多行启动画面？答案

【问题标题】：How can I create a multi-line splash screen?如何创建多行启动画面？
【发布时间】：2020-06-08 07:08:30
【问题描述】：

我正在尝试为网站创建一个基本的启动画面，但由于某种原因，启动画面上只显示了 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>

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

【问题讨论】：

提示：line-height

标签： javascript html css splash-screen

【解决方案1】：

这是因为大量的line-height你给了你的<p>标签所以每一行都会占据90vh所以它会在屏幕之外。 如果您希望文本出现在 splash 类的元素中间，您可以使用 flexbox 来实现此目的，而不是 line-height。

您所要做的就是使用splash 类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>

【讨论】：

谢谢。在加载交互式地图之前，我正在使用这个闪屏。闪屏消失后，我似乎无法与地图交互。有什么我可以做的，以便之后我可以与页面交互吗？
@JeremyHerbert 欢迎您，实际上这是您现在面临的另一个问题，根据SO guidelines，这不适合在 cmets 中扩展您的问题。因此，您需要通过发布minimal, reproducible example 来提出另一个后续问题。

【解决方案2】：

删除line-height: 90vh; 在.splash css 中的行

【讨论】：