Angular 文本在单词中被打断

在我的自定义组件中，我面临一个CSS问题。虽然我在组件上设置了类

ion text wrap

，但它在一些单词中出现了中断

这是我的组件模板

{{singleElement.text}

这是我的组件风格

.history\u main{
溢出：滚动；
背景颜色：米色；
单词包装：打断单词；
断字：断字；
}
.moveEntry{
字体大小：较大；
利润率：0.10px；
}

这是背后的代码

从'@angular/core'导入{Component，OnInit，Input，ChangeDetectorRef}；
@组成部分({
选择器：“loloof64棋盘历史记录”，
templateUrl:'./loloof64 chesshistory.component.html'，
样式URL:['./loloof64 chesshistory.component.scss']，
})
导出类Loloof64ChesshistoryComponent实现OnInit{
@输入（）高度=200.0；
@输入（）宽度=200.0；
元素=[]；
构造函数（私有changeDetector:ChangeDetectorRef，）{}
ngOnInit（）{}
addMoveFan=（moveFan）=>{
这是推({
文本：moveFan，
});
this.changeDetector.detectChanges（）；
}
清除=（）=>{
this.elements=[]；
}
}

以及该问题的屏幕截图：

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

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

这里是我从SAN到风扇的转换功能

convertsantofa（{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'）；
返回moveSan；
}

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

还请注意，ion text nowrap类并没有进行调整，因为它将所有元素保持在同一行上

还尝试对生成的字符串调用

.normalize（）

。

从中，我读到：

也许你想要

空白：不间断
？
尝试在元素上使用此css。
编辑：我最终使用flexbox系统，解决了这个问题

.history\u main{
显示器：flex；
柔性包装：包装；
溢出：滚动；
背景颜色：米色；
}

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

事实上，问题在于移动san到移动风扇的转换方法。
每次转换后，我都需要调用normalize（“NFD”）

convertsantofa（{moveSan，whiteTurn}）{
moveSan=moveSan.replace（/K/g，whiteTurn？'\u2654'：'\u265A'）。规范化（“NFD”）；
moveSan=moveSan.replace（/Q/g，whiteTurn？'\u2655'：'\u265B'）。规范化（“NFD”）；
moveSan=moveSan.replace（/R/g，whiteTurn？'\u2656'：'\u265C'）。规范化（“NFD”）；
moveSan=moveSan.replace（/B/g，whiteTurn？'\u2657'：'\u265D'）。规范化（“NFD”）；
moveSan=moveSan.replace（/N/g，whiteTurn？'\u2658'：'\u265E'）。规范化（“NFD”）；
返回moveSan；
}

我在评论中发现了@Ashokan的建议

为什么是NFD？我不知道为什么这个，只是觉得它是对的

预期结果是什么？嗨！事实上，我希望每个移动文本都设置在同一行中。这里Kd3分为两行。您有两个问题吗？1.错误的编码使Kd3变成了某些D32。行将单词分成新行。我说的对吗？也许，事实上我使用string.replaceAll和regex来实现从san move（不带figurine）到fan（带figurine unicode）的转换。我已经更新了答案OK，传播答案嗨！谢谢你的回答。我不完全理解你的建议。你是说用.ion文本nowrap代替吗？（我也试过了，但没有成功，忘了提它）。或者重写css ion文本换行？因为文档列表中没有空格：无中断，所以尝试使用
空格：无中断
直接调用，但也没有解决我的问题。您真的需要在每一行中调用normalize函数吗？还是可以在最后返回字符串时只调用一次？恭喜你弄明白了，顺便说一句！我必须在每一条线上使用它。无论如何，这个解决方案不起作用。但我使用flexbox和flex wrap属性解决了我的问题。
.ion-text-wrap    white-space: normal