• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

jquery-textfill/jquery-textfill: Resizes font-size of text to fit into container

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

jquery-textfill/jquery-textfill

开源软件地址:

https://github.com/jquery-textfill/jquery-textfill

开源编程语言:

JavaScript 89.2%

开源软件介绍:

jQuery TextFill

This jQuery plugin resizes text to make it fit into a container. The font size gets as big as possible.

logo

Usage

  • Remember to include jQuery and jQuery TextFill:
<script src="jquery.min.js"></script>
<script src="jquery.textfill.min.js"></script>
  • Select which element you'll use. Make sure to:
    • Specify the parent's width and height
    • Put the text inside of a <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>
  • Initialize jQuery TextFill
$('#my-element').textfill({
    ...options...
});

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
allowOverflow Allows text to overflow when minFontPixels is reached. Won't fail resizing, but instead will overflow container. false
debug Output debugging messages to console. false

For example,

<script>
$(function() {
    $('#my-element').textfill({
        maxFontPixels: 36
    });
});
</script>

Callbacks

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>

Contributing

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 tell you about it!

If you found something critical or just want to make a suggestion open an issue and start typing right away.

Credits

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.

License

jquery-textfill is licensed under the MIT License. See file COPYING.md to see what you can and cannot do with the source.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap