Contact us Create app

Directory

← Back

textfit-div

A web component that uses STRML/textFit to fit the text size to the available space

Author

Rating

Links

Popularity

<100

[ This description is mirrored from README.md at github.com/Protoss78/textfit-div on 2019-05-22 ]

Published on webcomponents.org

textfit-div

A web component that uses STRML/textFit to fit the text size to the available space. When the parent is resized, the text size is adjusted accordingly. Important: Make sure that textfit-div is put into a container that has an actual size.

Example:

<div class="layout horizontal flex wrap">
    <div class="horizontal-section layout horizontal flex">
        <textfit-div class="fullHeight flex" text="Hey!"></textfit-div>
    </div>
    <div class="horizontal-section layout horizontal flex">
        <textfit-div class="fullHeight flex styled" text="Styled text"></textfit-div>
    </div>
</div>
<paper-card>
    <textfit-div class="fullHeight flex"
                 text="A little bit more text to showcase an extreme sample with multi-line support enabled to demonstrate wrapping capabilities"
                 horizontal-center multi-line></textfit-div>
</paper-card>

Compatibility

(Loading compatibility data...)

Last updated: 2017-05-27

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • polymer#Polymer/polymer#1.9 - 2
  • textfit#STRML/textFit#^2.3.0
  • iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1 - 2
  • shadycss#webcomponents/shadycss#^1.0.1
Released
2017-05-27
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 2.0+
Polymer 1.0+ in 0.2.0
Browser
Browser Independent

textfit-div - Vaadin Add-on Directory

A web component that uses STRML/textFit to fit the text size to the available space textfit-div - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/Protoss78/textfit-div](https://github.com//Protoss78/textfit-div/blob/1.0.1/README.md) on 2019-05-22 ]** [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Protoss78/textfit-div) # textfit-div A web component that uses STRML/textFit to fit the text size to the available space. When the parent is resized, the text size is adjusted accordingly. Important: Make sure that textfit-div is put into a container that has an actual size. Example: ```html
```
Documentation
View on GitHub
Online Demo
GitHub Homepage
Issue tracker

textfit-div version 0.1.0
### Dependencies * textfit#STRML/textFit#^2.3.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.0 * iron-flex-layout#PolymerElements/iron-flex-layout#^1.0.3 * paper-styles#PolymerElements/paper-styles#^1.0.11 * paper-card#PolymerElements/paper-card#^1.1.1

textfit-div version 0.2.0
### Dependencies * textfit#STRML/textFit#^2.3.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^1.0.5 * iron-flex-layout#PolymerElements/iron-flex-layout#^1.0.3 * paper-styles#PolymerElements/paper-styles#^1.0.11 * paper-card#PolymerElements/paper-card#^1.1.1

textfit-div version 1.0.0
### Dependencies * polymer#Polymer/polymer#1.9 - 2 * textfit#STRML/textFit#^2.3.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1 - 2 * shadycss#webcomponents/shadycss#^1.0.1

textfit-div version 1.0.1
### Dependencies * polymer#Polymer/polymer#1.9 - 2 * textfit#STRML/textFit#^2.3.0 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1 - 2 * shadycss#webcomponents/shadycss#^1.0.1

Online