保持文本在同一行

Question

我正在使用bootstrap编写一个网页。如何将文本对齐在一行？它在大屏幕上看起来很好，但对于移动屏幕，它会分成三个。

我知道我已经修改了文本的字体大小，但最初我希望大小比它大。它有解决方法吗？如何将文本对齐到移动屏幕上的单行（如PC上的外观）？

以下是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;
 }

在PC上显示：

在手机上显示：

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>