如何禁用 HTML 元素的换行？

Posted 2023-03-05

【中文标题】如何禁用 HTML 元素的换行？

【英文标题】：How to disable wrapping in HTML elements?

【发布时间】：2018-02-16 14:46:00

【问题描述】：

我正在开发一个 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;

【问题讨论】：

要么在移动设备上缩小字体大小......要么让单词本身中断，要么在 HTML 代码中使用软连字符（更多控制），要么 CSS 属性 overflow-wrap 和/或hyphens ...？ （这似乎是你在其他项目中已经以某种方式实现的目标，所以......）

【参考方案1】：

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

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

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

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