Multiline Truncation With Ellipsis And Toggle Links - jQuery multiTextToggleCollapse

Yet another multi-line text truncation plugin that truncates & collapse long text block by lines and allows the visitor to toggle the truncated text with Read More & Read Less links.

See also:

• Shorten Long Text With Ellipsis - jQuery Dotify
• Truncate Text By Words Or Characters
• Animated Read More Plugin For Long Content - jQuery readMore.js

How to use it:

1. Insert the multiTextToggleCollapse plugin's JavaScript and CSS files into the HTML file.

<link href="src/index.css" rel="stylesheet">
<script src="/path/to/cdn/jquery-1.12.4.min.js"></script>
<script src="src/jquery.multiTextToggleCollapse.js"></script>

2. Attach the function to the multiTextToggleCollapse to the text block and limit the size of the text by lines (Default: 4).

<p class="example">Fusce sit amet augue sapien. Donec aliquam nulla id massa aliquet pulvinar. Sed diam nibh, cursus in congue et, ornare in urna. Praesent eget ex nec risus dapibus efficitur non blandit nunc. Etiam dictum malesuada ex, eget blandit nisl pretium vel. Phasellus ultricies pulvinar libero quis tempor. Donec id dolor bibendum, dapibus libero eu, lacinia odio. Integer pretium, tellus sed tincidunt dignissim, ante massa sollicitudin arcu, vel lobortis dolor nulla nec ligula. Aliquam elementum metus eu lectus molestie, eu ultricies nisl dignissim. Nulla ut lorem eget orci consectetur venenatis. Duis eget cursus sapien. Morbi tincidunt elit turpis, at tincidunt leo bibendum at. Pellentesque fringilla non sapien et fringilla. Vivamus viverra facilisis nisi quis tincidunt. Sed euismod molestie enim eget fermentum. Curabitur ut quam mollis, volutpat mauris quis, sodales odio.</p>

$(function(){
  $(".example").multiTextToggleCollapse({
    line: 5
  });
});

3. Override the default Read More & Read Less text in the JavaScript.

expandBtn.innerHTML = "More";
collapseBtn.innerHTML = "Read Less";

4. Override the default styling of the ellipsis.

.tool-multiwrapbox .multi-text_after {
  float: right;
  text-align: right;
  width: 6em;
  margin-left: -6em;
  position: absolute;
  left: 100%;
  padding-right: 5px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

---

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