将文本保持在同一行

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;
 }

如电脑显示:

手机显示：

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>

将文本保持在同一行

Keeping the text into the same line

html

css

responsive-design

twitter-bootstrap