# wrFitText

> Shrink a block whose text wraps to the width of its longest line.

Source: https://ngwr.dev/reference/directives/fit-text  
Kind: Directive  
Added in v16  
Optional

## Installation

Import the class, and `@use` the entry point in your global styles. Nothing warns you when the `@use` is missing.

```typescript
import { Component } from '@angular/core';
import { WrTag } from 'ngwr/badge';
import { WrFitText } from 'ngwr/directives';

@Component({ imports: [WrTag, WrFitText] })
export class MyComponent {}
```

```scss
@use 'ngwr/badge';
```

## 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.

```angular-html
<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.

```scss
.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` |

## See also

- [Badge](https://ngwr.dev/reference/components/badge) — `wr-tag`, the pill in the demo.
- [wrTypography](https://ngwr.dev/reference/directives/typography) — Style any text element with a shared text role.