jQuery Plugin For Multi-line Text Resizing - cramify.js

File Size: 5.15 KB
Views Total: 829
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Multi-line Text Resizing - cramify.js

cramify.js is a jQuery responsive text plugin for dynamically change the font sizes of the text based on their parent element width that supports multi-line text. The plugin will automatically set the appropriate font size to each line of your text to make them as big as possible on all browsers and platforms.

Basic usage:

1. Place jQuery library and the jQuery cramify.js plugin at the end of the document.

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="/path/to/cramify.js"></script>

2. Wrap the text into a DIV container.

<div class="example">
  cramify.js<br>
  Demo
</div>

3. Invoke the plugin.

$(".example").cramify();

4. The plugin breaks each lines of the div into a div class='cramify-line' and breaks each character of a line into a div class='cramify-char' as a child of the ".cramify-line" parent. So you can style the text in the CSS as follow.

.cramify-wrap {
  position: relative;
}

.cramify-line {
  text-align: center;
  line-height: 85%;
  display: block;
  white-space: nowrap;
}

.cramify-char {
  display: inline-block;
}

.cramify-space {
  color: transparent;
  width: .4em;
}

5. Adjust the line spacing of your text.

$(".example").cramify({
  lineSpacing: '3px'
});

This awesome jQuery plugin is developed by cassilup. For more Advanced Usages, please check the demo page or visit the official website.