Add hyphenation in Ionic app

I use an ion-grid in my Ionic 3 app. The data to show, I receive as JSON object from my database. 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:

enter image description here

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?

Try the word-break css

word-break: break-all

Thanks for the suggestion, @beck24. I tried word-break:break-word; before. This didn’t have any influence.

The word-break: break-all at least shows an effect: In a text, words are broken to new lines whenever the end of line is reached. However, no hyphen ("-") is added and the separation is still done without any use of grammar.

Since the css solution didn’t work, I decided to use a javascript library, as suggested by torazaburo in the comments of a stackoverflow-question.

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

}
1 Like

An ideal solution would be to create an ionic attribute like text-hyphen similar to text-wrap. But I have no idea how and if it is possible to create own custom attributes like that.

Does anyone know how to create such attributes?

Hi, Jay I’m having some troubles with hypher-library, what should I import and where, thanks in advice.

Hi @CristianFlores. You don’t need to import anything. You just install the hypher-library as explained in the link I posted above. Then you can use it as I showed in the same post.

Uhh… I still can’t make it work :confused: , could you share your .html & .ts, please?

You can see my.ts file above. Everything is in there.
In the .html file I just display the variable hypenatedWord.

What exactly doesn’t work as expected? Did you install everything as explained on the linked page?

Hi Jaykay,

How can I use your hyphenate code on html

tags?

I have many paragraphs to which I would like to combine it.