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 ]

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>

Install

Link to this version
ImportedReleased 27 May 2017MIT License
Framework Support
Polymer 2.0+
Also supported:
Polymer 1 (0.2.0)
Browser Compatibility
Install with
bower install --save Protoss78/textfit-div"#1.0.1"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - 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