Сохранение текста в той же строке

Question

Я пишу веб-страницу с помощью бутстрапа. Как я могу сохранить текст в одной строке? Он отлично выглядит на большом экране, но для мобильного экрана он разбивается на три.

Я знаю, что исправил размер шрифта для текста, но изначально хочу, чтобы размер был больше, чем было бы. Есть ли исправление? Как я могу сохранить текст в одной строке (как на ПК) для мобильного экрана?

Ниже приводится text-grid:

<div class='row first-layer'> 
    <div class='col-lg-1 col-md-1 col-sm-1 col-xs-1'> </div>  
    <div class='col-lg-10 col-md-10 col-sm-10 col-xs-10 text-center page-header'><b>Title of Web Page</b></div> 
    <div class='col-lg-1 col-md-1 col-sm-1 col-xs-1'> </div> 
</div> 

.page-header { 
    font-family: Calli; 
    font-size: 60px; 
    color: #996699; 
} 

Как показано на ПК:

Как показано на мобильном телефоне:

Answer 1

Используйте white-space: nowrap;, но это вызовет переполнение текста.
Его лучше, если вы установили размер шрифта в vw единицах:

.page-header { 
 
    font-family: Calli; 
 
    font-size: 10vw; 
 
    color: #996699; 
 
}

<div class='row first-layer'> 
 
    <div class='col-lg-1 col-md-1 col-sm-1 col-xs-1'> </div>  
 
    <div class='col-lg-10 col-md-10 col-sm-10 col-xs-10 text-center page-header'><b>Title of Web Page</b></div> 
 
    <div class='col-lg-1 col-md-1 col-sm-1 col-xs-1'> </div> 
 
</div>