
Product
A New Overview in our Dashboard
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
jquery-textfill
Advanced tools
This jQuery plugin resizes text to make it fit into a container. The font size gets as big as possible. http://jquery-textfill.github.io/
This jQuery plugin resizes text to make it fit into a container. The font size gets as big as possible.
<script src="jquery.min.js"></script>
<script src="jquery.textfill.min.js"></script>
<span/>
child by default (see Options to change this)<div id='my-element' style='width:100px;height:50px;'>
<span>The quick brown fox jumps over the lazy dog</span>
</div>
$('#my-element').textfill({
...options...
});
Remember, container means the parent element, while child is the
element that will resize. On the example above, the parent was the div
and the
child was the span
.
Name | Description | Default Value |
---|---|---|
minFontPixels | Minimal font size (in pixels). The text will shrink up to this value. | 4 |
maxFontPixels | Maximum font size (in pixels). The text will stretch up to this value.. If it's a negative value (size <= 0 ), the text will stretch to as big as the container can accommodate. | 40 |
innerTag | The child element tag to resize. We select it by using $(innerTag + ':visible:first', container) | span |
widthOnly | Will only resize to the width restraint. The font might become tiny under small containers. | false |
explicitWidth | Explicit width to resize. Defaults to the container's width. | null |
explicitHeight | Explicit height to resize. Defaults to the container's height. | null |
changeLineHeight | Also change the line-height of the parent container. This might be useful when shrinking to a small container. | false |
debug | Output debugging messages to console. | false |
For example,
<script>
$(function() {
$('#my-element').textfill({
maxFontPixels: 36
});
});
</script>
Name | Called when... | Default Value |
---|---|---|
success | Called when a resizing is successful | null |
fail | Called when a resizing is failed | null |
complete | Called when all elements are done | null |
For example,
<script>
$(function() {
$('#my-element').textfill({
success: function() {
console.log("yay!")
},
fail: function() {
alert("boo hoo!")
}
});
});
</script>
You are very welcome to contribute! A good number of people did, so feel free to help no matter how small the changes might be.
Just make sure to read the file CONTRIBUTING.md
first.
There we make a quick take on how you could help us.
Also, there we lay down our rules for reporting issues and making pull requests. Gotcha! Now you can't say we didn't told you about it!
If you found something critical or just want to make a suggestion open an issue and start typing right away.
This jQuery plugin was created by Russ Painter around May 2009, beginning with a StackOverflow question.
In very early 2012, Yu-Jie Lin helped to move the project to GitHub with version 0.1 and obtained the clearly stated open source licensing from Russ.
Around July 2014 Alexandre Dantas was made a contributor, currently maintaining the project.
jquery-textfill
is licensed under the MIT License. See file
COPYING.md
to see what you can and cannot do with the
source.
Copyright (c) 2014 Alexandre Dantas
Copyright (c) 2012-2013 Yu-Jie Lin
Copyright (c) 2009 Russ Painter
FAQs
This jQuery plugin resizes text to make it fit into a container. The font size gets as big as possible. http://jquery-textfill.github.io/
We found that jquery-textfill demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
Product
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
Security News
CISA denies CVE funding issues amid backlash over a new CVE foundation formed by board members, raising concerns about transparency and program governance.