yuanqing / line-clamp Goto Github PK
View Code? Open in Web Editor NEW:clamp: Line clamp a DOM element in vanilla JavaScript
Home Page: https://codepen.io/lyuanqing/pen/VQQVry
License: MIT License
:clamp: Line clamp a DOM element in vanilla JavaScript
Home Page: https://codepen.io/lyuanqing/pen/VQQVry
License: MIT License
For app frameworks like Angular, HTML elements can be generated and apply effects (like line-clamping) before those HTML elements are actually rendered into the DOM. This means that virtually all values from window.getComputedStyles
are empty strings which makes this line of code produce NaN
as a value.
In truncateTextNode
, the comparison of the text node's scroll height to the maximum height now compares a number (zero) to NaN
, which is always false. This never breaks out of the loop and every word in the text node gets deleted. This means that text node content that gets initialized before an HTML element is inserted into the DOM will be deleted completely.
Can lineHeight
be added as an option to the exported function so that frameworks can inject expected line heights before components are added to the DOM? Some other alternative could be acceptable, so long as the case of a zero-height element with no computed line-height value can be handled.
module.exports = function (rootElement, lineCount, options) {
...
var maximumHeight =
(lineCount || 1) * parseInt(window.getComputedStyle(rootElement).lineHeight || options.lineHeight, 10);
For the elements which have line-height written as a float number there is an issue in calculation, due to truncation of decimal part.
e.g. for line-height: 18.5667px
parseInt('18.5667px', 10) // 18
parseFloat('18.5667px') // 18.5667
Suggestion is to update how maximumHeight
is calculated:
module.exports = function (rootElement, lineCount, options) {
...
var maximumHeight = Math.round(
(lineCount || 1) *
parseFloat(window.getComputedStyle(rootElement).lineHeight))
It would be great if you would wrap ellipsis character into span with class to enable styling it differently than the rest of the text.
I have an issue where any text that apply line-clamp to gets truncated to just one line in smaller (< 968px) viewports even though I've set it the option to three lines. Works fine for viewports > 968px. Any ideas what could be causing this?
I've confirmed that the line-clamp method correctly calculates the line-height of the text element.
Sorry if this sounds kind of stupid, I should know the answer, but how do I go about adding something like this into a non Node application?
Suppose I just had raw HTML page... is there a way I can just download minified version or have some kind of CDN to reference?
The code pen (https://codepen.io/lyuanqing/pen/VQQVry) is broken:
Uncaught ReferenceError: lineClamp is not defined at pen.js:2 (anonymous) @ pen.js:2
https://wzrd.in/standalone/line-clamp@latest returns a 504 Gateway Time-out
Please add file bundle.js
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.