Scale text without breaking it to next line - html

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> <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> <span id="description">Cinematographer</span>
</div>
<div id="arrow-downward">
<i class="material-icons md-24">arrow_downward</i>
</div>
</div>