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

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

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

我尝试了css方法（如下），但没有任何效果

---

有人知道怎么做吗？

正如torazaburo在评论中建议的那样，我决定使用javascript库。 最后我用的是布拉姆斯坦的

它工作得很好。我在Ionic 3中的实现：

主页.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);
  }

}

---

浏览器对CSS断字的支持非常不稳定。考虑使用一个库。考虑到离子/角度应用程序的使用，有什么可以推荐的吗？一个理想的解决方案是创建一个类似于<代码>文本连字符< /代码>的类似于<代码>文本包< /代码>的离子属性。但我不知道如何以及是否有可能创建这样的自定义属性。

// 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);
  }

}