Class HyloHyphen

Adds style "hyphens: auto;" to words which exceed a certain amount of characters.

Uses a very simple html parser to target only text content and not markup. Be as precise as possible when defining the effected content.

In order to work the "lang" attribute has to be set in one of the ancestor elements.

CSS classes defined with this component which set the style "hyphens: auto;" when certain conditions are met:

hylo-hyphen, hylo-hyphen-horizontal, hylo-hyphen-vertical
hylo-hyphen-xs, hylo-hyphen-xs-horizontal, hylo-hyphen-horizontal-xs, hylo-hyphen-xs-vertical, hylo-hyphen-vertical-xs
hylo-hyphen-sm, hylo-hyphen-sm-horizontal, hylo-hyphen-horizontal-sm, hylo-hyphen-sm-vertical, hylo-hyphen-vertical-sm
hylo-hyphen-md, hylo-hyphen-md-horizontal, hylo-hyphen-horizontal-md, hylo-hyphen-md-vertical, hylo-hyphen-vertical-md
hylo-hyphen-lg, hylo-hyphen-lg-horizontal, hylo-hyphen-horizontal-lg, hylo-hyphen-lg-vertical, hylo-hyphen-vertical-lg
hylo-hyphen-xl, hylo-hyphen-xl-horizontal, hylo-hyphen-horizontal-xl, hylo-hyphen-xl-vertical, hylo-hyphen-vertical-xl

Properties

breakpoints: string = ''

A comma separated list of breakpoints (xs, sm, md, lg, xl). If breakpoints are defined, the style is only applied for the given breakpoints.

minLength: number = 15

The minimum amount of characters a word has to have to get the style applied to.

orientation: "horizontal" | "vertical"

When defined, the style is only applied for this view screen orientation.