Add hyphenation in Angular / Ionic apps

Question

I use an ion-grid in my Ionic 3 app. Some words don't fit in the columns and are, hence, cut off and continued in the next row. No hyphen ("-") is added and the separation is without any context to grammar. Like this:

This looks really ugly. I would like to somehow add hyphenation. However, I don't get it running.

I tried the css-way (as follows), but this didn't have any effect

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

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

Does anybody have an idea of how to do this?

Answer 1

As suggested by torazaburo in the comments, I decided to use a javascript library. I ended up using the hypher-library by bramstein.

It works very well. My implementation in 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);
  }

}