缩放文本而不将其分解为下一行

Question

我有一个覆盖整个页面的div，里面有一些文字。我希望文本大，中心对齐，并在不同的屏幕尺寸上正确缩放，而不会将字断开到下一行。我希望它是一条线。我该怎么做？

#main {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  letter-spacing: 10px;
}

#main-text {
  z-index: 1;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  font-size: 50px;
  text-align: center;
  white-space: nowrap;
}

#name {
  font-weight: 900;
}

#description {
  font-weight: 400;
}

#arrow-downward {
  z-index: 1;
  position: fixed;
  bottom: 25px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 24px;
  height: 24px;
  text-align: center;
}

#arrow-downward:hover {
  color: #777 !important;
  cursor: pointer;
}

.material-icons .md-24 {
  font-size: 24px;
}

<div id="main">
  <div id="main-text">
    <span id="name">Kaushal Shah</span>&nbsp;&nbsp;&nbsp;<span id="description">Cinematographer</span>
  </div>
  <div id="arrow-downward">
    <i class="material-icons md-24">arrow_downward</i>
  </div>
</div>

Answer 1

您可以使用vw作为单位来设置文字的字体大小，这样可以根据屏幕宽度调整大小。

例如：＃main-text 上的font-size: 3.5vw;将为您提供以下结果

#main {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  letter-spacing: 10px;
}

#main-text {
  z-index: 1;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  font-size: 3.5vw;
  text-align: center;
  white-space: nowrap;
}

#name {
  font-weight: 900;
}

#description {
  font-weight: 400;
}

#arrow-downward {
  z-index: 1;
  position: fixed;
  bottom: 25px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 24px;
  height: 24px;
  text-align: center;
}

#arrow-downward:hover {
  color: #777 !important;
  cursor: pointer;
}

.material-icons .md-24 {
  font-size: 24px;
}

<div id="main">
  <div id="main-text">
    <span id="name">Kaushal Shah</span>&nbsp;&nbsp;&nbsp;<span id="description">Cinematographer</span>
  </div>
  <div id="arrow-downward">
    <i class="material-icons md-24">arrow_downward</i>
  </div>
</div>