Sets itself to the width of the wrapped text.

If a text wraps into two (or more) lines because the parent element is not wide enough, the width of the text stays at the width of the parent element even if the text block itself is now shorter (space at the right side of the text block). This component sets its width to the actual width of the text block.

It also provides a couple more text width adjustment choices.

Helpful if the parent element is part of a flex row where the space between is supposed to be distributed equally.

Properties

disabled: string | boolean | ("xs" | "sm" | "md" | "lg" | "xl")[]

Disables all functionality either in general or for specific breakpoints. Provide breakpoints in a comma separated string or in an array. A hylo-breakpoint-listener is needed when you provide breakpoints.

inline: boolean

Sets the display style of the element to "inline-block" instead of "block". Depending on the style of the parent element, it works with either one.

justify: number

Justifies the text by decreasing the wrapping container's width in steps by the given amount (in px) until the height increases. The result is the most possible narrow wrapper container width.

You can align the text by giving this container "display: flex;" and adjust the position with "justify-content".

keepChecking: number = 0

An interval in millisecond in which the component double checks its own size.

Default is 0 -> disabled.

maxHeight: number

If the height is bigger than this value (in px), the width gets increased in "maxHeightStep" steps until the height is lower or equals this value.

maxHeightMaxSteps: number = 200

The maximal value of steps added together for testing of "maxHeight". If the steps added together is bigger than this, the testing of "maxHeight" stops and the width is set back to the original width before the testing started.

maxHeightStep: number = 5

The step in px which is used for "maxHeight".

minHeight: number

If the height is smaller than this value (in px), the width gets decreased in "minHeightStep" steps until the height is bigger or equals this value. If the height can not be reached, the original width will be kept.

minHeightStep: number = 5

The step in px which is used for "minHeight".

noWordBreak: number | boolean

When the width gets decreased through the "justify" or "minHeight" action, words which span over a whole line are being broken into the next line. Set this flag to prevent this. Each word will be wrapped into a span tag with the style "white-space: nowrap;". All tags which are part of the text like or will be removed.

When set as number, the effect is only applied when at maximum this amount of words are present.

recheck: number = 100

Rechecks the width after this amount of milliseconds on initialization.

Methods

  • Updates the components size.

    Returns Promise<void>

Events

hyloUpdated: EventEmitter<any>

Fires when then components size got updated.

Generated using TypeDoc