import { Component } from '@angular/core';
import { WrTag } from 'ngwr/badge';
import { WrFitText } from 'ngwr/directives';
@Component({ imports: [WrTag, WrFitText] })
export class MyComponent {}wrFitText
Shrink a block whose text wraps to the width of its longest line.
Installation
Import the class, and @use the entry point in your global styles. Nothing warns you when the @use is missing.
Usage
A wrapped block keeps the width it was offered, so a tinted pill carries an empty band beside its text. wrFitText sets the host's inline width to its widest line. The line breaks stay where they were.
<wr-tag class="wrap" wrFitText transparent color="success">
Charging finished, waiting for the next shift to collect
</wr-tag>
<p [wrFitText]="fit()">…</p>What it needs
A host that takes a width and wraps: a block, an inline-block, a flex or grid item. wr-tag is one line by default, so let it wrap first.
.wrap {
display: inline-block;
max-inline-size: 100%;
text-align: start;
white-space: normal;
}| When | What happens |
|---|---|
| The text changes | Measured again on the next frame. |
| The parent gets wider or narrower | Measured again on the next frame. |
| The text fits on one line | No width is written. |
[wrFitText]="false" | The width it wrote is removed. |
| Server rendering | Nothing: the width is written in the browser. |
API
| Name | Description | Type | Default |
|---|---|---|---|
[wrFitText] | Sets the inline width to the widest line. false switches it off. | boolean | true |