textfit-div
A web component that uses STRML/textFit to fit the text size to the available space
[ This description is mirrored from README.md at github.com/Protoss78/textfit-div on 2019-05-22 ]
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>
Links
Compatibility
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 spaceView 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