# @yomyer/fittext

> Fit Text

Latest version **6.0.5** (published 2018-05-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @yomyer/fittext
pnpm add @yomyer/fittext
yarn add @yomyer/fittext
bun add @yomyer/fittext
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.0.5 |
| Published | 2018-05-24 |
| First published | 2018-05-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 27.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Yomyer New Line S.L. |
| Maintainers | yomyer |

## Links

- npm: https://www.npmjs.com/package/@yomyer/fittext
- Repository: https://github.com/Yomyer/fittext
- Homepage: https://github.com/Yomyer/fittext#readme
- Issues: https://github.com/Yomyer/fittext/issues
- npm.io page: https://npm.io/package/@yomyer/fittext

## Dependencies (1)

- [css-element-queries](https://npm.io/package/css-element-queries.md) ^1.0.2

## Recent versions

- 6.0.5 (latest) — 2018-05-24
- 5.2.7 (old) — 2018-05-22
- 6.0.4 — 2018-05-23
- 6.0.3 — 2018-05-23
- 6.0.2 — 2018-05-22
- 6.0.1 — 2018-05-22
- 5.2.6-rc.0 — 2018-05-22
- 5.2.6-rc2 — 2018-05-22
- 0.0.5 — 2018-05-18
- 0.0.4 — 2018-05-18
- 0.0.3 — 2018-05-18
- 0.0.2 — 2018-05-18
- 0.0.1 — 2018-05-18

## README

# @yomyer/fittext

cropAn angular (typescript) directive to do what fittext.js did when jquery was in vogue.
This option automatically adjusts the font size to match the width of your container, plus if a[minFontSize] is defined and the ellipse does not fit, it activates the ellipse and crop the text and adds a symbol of etc. (...)

### Installation

Install the library
```sh
$ npm install --save @yomyer/fittext
```

### Usage

Import it in your Angular project as a module

1) Declare it in your module
    ```sh
    import {FittextModule} from '@yomyer/fittext';
    
    @NgModule({
      imports: [
        FittextModule,
        ...
      ]
    })
    
    ```
    
2) Use it in a component
    
    **The element that contains this directive should have a CSS width!**
    ```sh
   import {Component} from '@angular/core';
   
    @Component({
      selector: 'hero',
      template: `
        <div style="align-content: center;">
            <div style="width: 20%; height: 20%; margin: 0 auto;">
                <div fittext>test</div>
            </div>
         </div>`
    })
    
    export class AppComponent {}
    ```

   Parameters:
    
  | Parameter | Description | Values |
  | --- | --- | --- |
  | `fittext` (required) | Selector for the directive. | boolean (defaults to `true`)
  | `[activateOnResize]` (optional) | enable/disable the auto-scale in case of window resize | boolean (defaults to `true`)
  | `[container]` (optional) | parent to compare width/height | nativeElement
  | `[compression]` (optional) | compression rate. How fast should the text resize? | number (defaults to `1`)
  | `[minFontSize]` (optional) | minimum font size allowed on element | number (defaults to `0`)
  | `[maxFontSize]` (optional) | maximum font size allowed on element | number (defaults to `infinity`)
  | `[ellipsis]` (optional) | enable/disable ellipis crop | boolean (defaults to `true`)
  | `[ellipsisSymbol]` (optional) | symbol to use in ellipis | string (defaults to `…`)


### Development
Want to contribute? Great!
Simply, clone the repository!

License
----
ISC


**- Yomyer**

---
_Source: https://npm.io/package/@yomyer/fittext · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._