如何在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容器,该容器会抑制容器内的所有换行符.