html - 将文本保持在同一行

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>