Trucated.js jQuery Demo

Developer
Jeff Wainwright
Size
3,109 Kb
Views
12,144
  1. Trucated.js jQuery Demo Previews
  2. Trucated.js jQuery Demo HTML Codes
  3. Trucated.js jQuery Demo CSS Codes
  4. Trucated.js jQuery Demo JS Codes

How do I make an trucated.js jquery demo?

Truncated.js is a javascript plugin that shortens a text string based on a specified max-height & adds an ellipsis at the end.. What is a trucated.js jquery demo? How do you make a trucated.js jquery demo? This script and codes were developed by Jeff Wainwright on 08 December 2022, Thursday.

Trucated.js jQuery Demo Previews
IQ Test

Trucated.js jQuery Demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Trucated.js jQuery Demo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p> To surpass others is fucking tough, if you only do as you are told you don’t have it in you to succeed. When you design, you have to draw on your own fucking life experiences. If it’s not something you would want to read/look at/use then why fucking bother? Intuition is fucking important. Design is all about fucking relationships—the relationship of form and content, the relationship of elements, the relationship of designer and user. Why are you fucking reading all of this? Get back to work. If you’re not being fucking honest with yourself how could you ever hope to communicate something meaningful to someone else? Never, never assume that what you have achieved is fucking good enough. A good fucking composition is the result of a hierarchy consisting of clearly contrasting elements set with distinct alignments containing irregular intervals of negative space. Someday is not a fucking day of the week. Make your work consistent but not fucking predictable. What’s important is the fucking drive to see a project through no matter what. This design is fucking brilliant. The details are not the details. They make the fucking design. Nothing of value comes to you without fucking working
</p> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Trucated.js jQuery Demo - Script Codes CSS Codes

p { max-width: 18.75rem; margin: 1rem auto;
}
.js-truncated:after { content: '\2026'; position: absolute;
}

Trucated.js jQuery Demo - Script Codes JS Codes

(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.truncated = factory());
}(this, (function () { 'use strict';
function Truncated(target, maxHeight, cName) { var content = typeof target === 'string' ? document.querySelectorAll(target) : target; if (!('length' in content)) { content = [content]; } var classname = cName || 'js-truncated'; for (var i = 0; i < content.length; i++) { var text = content[i]; // exit early if we we don't need truncation if (text.offsetHeight < maxHeight) { var hasClass = text.classList.contains(classname); if (hasClass) { text.className = text.classList.remove(classname); } return false; } // truncate var trimmedtext = text.textContent; do { var lastSpace = trimmedtext.lastIndexOf(' '); if (lastSpace < 0) break; trimmedtext = trimmedtext.substr(0, lastSpace); text.textContent = trimmedtext; } while (text.offsetHeight > maxHeight); return text.classList.add(classname); } return this;
}
function truncated (target, maxHeight, cName) { return new Truncated(target, maxHeight, cName);
}
if (window.$ || window.jQuery || window.Zepto) { window.$.fn.truncated = function truncatedFunc(maxHeight, cName) { return new Truncated(this, maxHeight, cName); };
}
return truncated;
})));
$('p').truncated(70);
Trucated.js jQuery Demo - Script Codes
Trucated.js jQuery Demo - Script Codes
Home Page Home
Developer Jeff Wainwright
Username yowainwright
Uploaded December 08, 2022
Rating 3
Size 3,109 Kb
Views 12,144
Do you need developer help for Trucated.js jQuery Demo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeff Wainwright (yowainwright) Script Codes
Name
A Pen by Jeff Wainwright
Meeting Schedule Widget with Angular
Noframe.js Example
Multiple Swiper Demo
Reframe.js Example
Stickybits Multiple Instances Demo
Full CSS Ribbon on 1 element
Stickybits Demo
Reframe.js Demo
Playing with URLs and ScrollSpy
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!