如何使用 CSS 在表头中用空格将单词换行？

Question

我有一个 Angular 的 Mat-Table。以下是标题 HTML 代码。

<ng-container matColumnDef="{{column}}" *ngFor="let column of columns; let j=index">
     <mat-header-cell *matHeaderCellDef class="table-header">
        <div *ngFor="let option of options">
            <div class="table-header-title">{{option.title}}</div>
       </div>
     </mat-header-cell>
</ng-container>

<!-- ...rest of the code -->

标题列的标题来自我的后端 API ({{option.title}})。每个标题通常包含两个字符串，例如“Some event0”； “一些事件1-5”； “一些事件50-500”等。当我调整窗口大小时，文本将换行为两行。我想要的是，当它换行成两行时，它应该保持单词完整。

例如，如果窗口宽度减小时文本“some events50-500”被换行为两行，则第一行应为“some”，第二行应为“events50-500”。

但是现在第一行显示“Some events5”，第二行显示“0-500”。或者它在第一行显示“一些事件”，在第二行显示“50-500”。

我希望纯 CSS 按空格分割文本并相应地换行。我不想重写表头的列数组。

Answer 1

我想要纯CSS...

抱歉。那不存在。 有一个开放的问题，用于标准化 CSS 中的解决方案来处理这种情况，但它还没有实现。

我不想重写表头的列数组。

您现在最好的选择可能是用不间断的连字符替换连字符。看起来像这样：

<div>Some event0</div>
<div>some events1&#8209;5</div>
<div>some events50&#8209;500</div>

现在，很明显您正在动态构建此 HTML，因此我建议在 Angular 模板中采用以下方法之一：

1. <div [innerHTML]="option.title.replace(/-/g, '&#8209;')"></div>
2. <div>{{ option.title.replace(/-/g, '‑') }}</div>