angular - 文字在 word 内被破坏

Question

在我的自定义组件中，我遇到了 CSS 问题。虽然我已经在组件上设置了类ion-text-wrap，但它打破了一些单词。

这是我的组件模板

<div class="ion-text-wrap history_main" 
    [style.width.px]="width" [style.height.px]="height"
>
    <span *ngFor="let singleElement of elements" class="moveEntry">{{singleElement.text}}</span>
</div>

这是我的组件样式

.history_main {
    overflow: scroll;
    background-color: beige;
    word-wrap: break-word;
    word-break: break-word;
}

.moveEntry {
    font-size: larger;
    margin: 0 10px;
}

这是隐藏的代码

import { Component, OnInit, Input, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'loloof64-chesshistory',
  templateUrl: './loloof64-chesshistory.component.html',
  styleUrls: ['./loloof64-chesshistory.component.scss'],
})
export class Loloof64ChesshistoryComponent implements OnInit {

  @Input() height = 200.0;
  @Input() width = 200.0;

  elements = [];

  constructor(private changeDetector: ChangeDetectorRef,) { }

  ngOnInit() {}

  addMoveFan = (moveFan) => {
    this.elements.push({
      text: moveFan,
    });
    this.changeDetector.detectChanges();
  }

  clear = () => {
    this.elements = [];
  }

}

以及问题的截图：

在这里，您可以在第一行末尾的“Kd3”上进行奇怪的中断。

据我说，这与使用 Unicode 字符有关，但即使有这样的假设，我也无法找到解决方案。

这是我从 SAN 到 FAN 的转换功能

convertSanToFan({moveSan, whiteTurn}) {
    moveSan = moveSan.replace(/K/g, whiteTurn ? '\u2654' : '\u265A');
    moveSan = moveSan.replace(/Q/g, whiteTurn ? '\u2655' : '\u265B');
    moveSan = moveSan.replace(/R/g, whiteTurn ? '\u2656' : '\u265C');
    moveSan = moveSan.replace(/B/g, whiteTurn ? '\u2657' : '\u265D');
    moveSan = moveSan.replace(/N/g, whiteTurn ? '\u2658' : '\u265E');

    return moveSan;
  }

也许可以改进 Unicode 的使用，以便将字符串视为一个完整的单词？

另请注意， ion-text-nowrap 类不适用，因为它将所有元素保持在同一行。

还尝试调用.normalize()生成的字符串。

标签： angularionic-frameworkionic4

Answer 1

编辑：我最终使用了 flexbox 系统，解决了这个问题

.history_main {
    display: flex;
    flex-wrap: wrap;
    overflow: scroll;
    background-color: beige;
}

编辑：事实上，这并不能解决问题。

事实上，问题在于 move san 到 move fan 转换方法。每次转换后我都需要调用 normalize("NFD") 。

  convertSanToFan({moveSan, whiteTurn}) {
    moveSan = moveSan.replace(/K/g, whiteTurn ? '\u2654' : '\u265A').normalize("NFD");
    moveSan = moveSan.replace(/Q/g, whiteTurn ? '\u2655' : '\u265B').normalize("NFD");
    moveSan = moveSan.replace(/R/g, whiteTurn ? '\u2656' : '\u265C').normalize("NFD");
    moveSan = moveSan.replace(/B/g, whiteTurn ? '\u2657' : '\u265D').normalize("NFD");
    moveSan = moveSan.replace(/N/g, whiteTurn ? '\u2658' : '\u265E').normalize("NFD");

    return moveSan;
  }

感谢评论中的@Ashokan 建议。

为什么选择 NFD？不知道为什么会这样，只是觉得是对的。

Mozilla 开发者网络文档