如何在HTML元素中禁用包装？

Question

我正在开发一个Ionic应用程序，但我的标题组件出现问题。它的元素是小屏幕尺寸的包装，我希望它们不要。

这是目标：

以下是现在发生的事情：

我知道我可以为标题设置固定宽度，但我不愿意。我也不想用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应用于容器，这会抑制容器内的所有换行符。