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

Question

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

这看起来真的很难看。我想以某种方式添加连字符。但是，我不明白运行.

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

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

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

有人知道怎么做吗？

Answer 1

正如 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);
  }

}

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

Add hyphenation in Angular / Ionic apps

javascript

typescript

hybrid-mobile-app

ionic3

angular