html - 如何禁用 HTML 元素中的换行？

Question

我正在开发一个 Ionic 应用程序，但我的 header 组件出现了问题。它的元素被小屏幕包裹着，我希望它们不要这样。

这是目标:

这是现在发生的事情:

我知道我可以为页眉设置固定宽度，但我不想这样做。我也不想使用 JavaScript 来计算宽度。

这是标题组件的 HTML/Angular/Ionic 代码:

<h1 *ngIf="backButton; else titleBackButton">{{ title }}</h1> <!-- show if backButton != true -->
<ng-template #titleBackButton> <!-- show if backButton == true -->
  <button ion-button round class="button-back">
    <ion-icon name="arrow-back"></ion-icon>
  </button>
  <h1 class="floated-title">{{ title }}</h1> <!-- this has been floated to the right -->
</ng-template>

这是我的 CSS 样式:

.button-back {
  margin: 17px 0 0 10px;
}

.floated-title {
  float: right;
}

Answer 1

任何时候你想强制元素排成一行，并且永远不要换行，给父容器 display: flex。这会自动应用 flex-wrap: nowrap 和 flex-direction: row。

以上建议适用于纯 CSS。一些框架可能会设置不同的默认值。

例如，在 React 中，flex-direction 默认为 column。

或者，您可以将 white-space: nowrap 应用于容器，这会抑制容器内的所有换行符。