如何在HTML元素中禁用包装？ [英] How to disable wrapping in HTML elements?

问题描述

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

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 what's happening now:

我知道我可以为标题设置固定宽度，但我不想。我也不想使用JavaScript来计算宽度。

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.

以下是标题组件的HTML / Angular / Ionic代码：

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

<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样式：

Here are my CSS styles:

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

.floated-title {
  float: right;
}

推荐答案

任何时候你想强迫连续排列的元素，永不换行，给父容器 display：flex 。这会自动应用 flex-wrap：nowrap 和 flex-direction：row 。

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.

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

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

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

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

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

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

这篇关于如何在HTML元素中禁用包装？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！