Scale text without breaking it to next line

Question

I have a div which covers the entire page and has some text in it. I want that text to be big, center aligned and scale properly on different screen sizes without breaking the words to the next line. I want it be one single line. How do I do it?

#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

You can use vw as a unit to set the font size of the text, and this will make it resize according to screen width.

for example: font-size: 3.5vw; on #main-text will give you the result below

#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>