如何禁用HTML元素中的包装?

I'm developing an Ionic app, and having trouble with my header component. Its elements are wrapping with small screen sizes, and I would like them not to.

我正在开发一个离子应用程序，我的头组件有问题。它的元素都是用小屏幕大小包装的，我希望他们不要这么做。

Here's the goal:

我们的目标:

Here's what's happening now:

这是现在的情况:

I know I could set a fixed width to the header, but I would like not to. I also wouldn't like to use JavaScript to calculate the width.

我知道我可以为标题设置一个固定的宽度，但我不想这样做。我也不喜欢使用JavaScript来计算宽度。

Here's the HTML/Angular/Ionic code for the title component:

以下是标题组件的HTML/角/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>

Here are my CSS styles:

以下是我的CSS样式:

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

.floated-title {
  float: right;
}

1 个解决方案

#1

Any time you want to force elements to line-up in a row, and never wrap, give the parent container display: flex. This automatically applies flex-wrap: nowrap and flex-direction: row.

任何时候，当您想要强制元素排成一行，而不是包装时，请给父容器显示:flex。这将自动应用flex-wrap: nowrap和flex-direction: row。

The above suggestion applies to plain CSS. Some frameworks may set different defaults.

上述建议适用于普通CSS。一些框架可能设置不同的默认值。

For instance, in React, flex-direction defaults to column.

例如，在React中，浮动方向默认为列。

Alternatively, you can apply white-space: nowrap to the container, which suppresses all line breaks inside the container.

或者，您可以对容器应用空白:nowrap，它会抑制容器内的所有行中断。

#1