在 Angular / Ionic 应用程序中添加连字符

Question

我在 Ionic 3 应用程序中使用了离子网格。有些单词不适合列，因此被截断并在下一行继续。没有添加连字符（“-”），并且分隔符没有任何语法上下文。像这样：

这看起来真的很难看。我想以某种方式添加连字符。但是，我没有让它运行。

我尝试了css-way（如下），但这没有任何效果

<ion-grid lang="...">

ion-grid{
   -ms-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto;
}

有人知道怎么做吗？

Answer 1

根据 cmets 中 torazaburo 的建议，我决定使用 JavaScript 库。 我最终使用了 bramstein 的 hypher-library。

效果很好。我在 Ionic 3 中的实现：

homePage.ts

// after imports declare hypher-variables
var Hypher = require('hypher');
var german = require('hyphenation.xx');
// xx stands for the language-pattern, e.g. "en-us". A full list can be found here: https://github.com/bramstein/hyphenation-patterns/tree/master/patterns

@Component({
  selector: 'home-page',
  templateUrl: 'home.html'
})

export class HomePage {
  h = new Hypher(language);  

  constructor(...) { }

  hyphenateWord(){
    let hypenatedWord = this.h.hyphenateText("ThisIsAVeryLongWord);
  }

}