html - Bootstrap 如何让文本无响应但在 div 内？

Question

在移动设备中文本是这样的:

但我需要它保持这样:

我使用的代码:

<div class="container-fluid">
    <div class="row" style="background-color:#071885;">
        <div class="col-md-12 text-center">     
            <h1 style="color: #000;font-weight: bold;background: gold;font-size: 24px; padding: 5px;">
            LONG TITLE LONG TITLE LONG TITLE LONG TITLE LONG TITLE
            </h1>
         </div>
    </div>
    </div>

我已经尝试过 no-wrap 但没有用。

更新:

@库库兹

Answer 1

你可以为此使用 flexbox:

1. 在行上设置 display: inline-flex 并利用 内联元素将扩展到其内容 的事实。

2. 现在您可以使用 text-nowrap 类或 white-space: nowrap 来获得您需要的效果 - 请参见下面的演示:

.row {
  display: inline-flex; /* ensures the text stays inside */
  white-space: nowrap;
  min-width: 100vw; /* sets 100% width in desktop */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="container-fluid">
  <div class="row" style="background-color:#071885;">
    <div class="col-md-12 text-center">
      <h1 style="color: #000;font-weight: bold;background: gold;font-size: 24px; padding: 5px;">
        LONG TITLE LONG TITLE LONG TITLE LONG TITLE LONG TITLE
      </h1>
    </div>
  </div>
</div>