Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Multi-line detection methods
(version: 0)
Comparing performance of:
Multi-line detection using getComputedStyles vs Multi-line detection using the NYT method
Created:
4 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<h2>This is a multi-<br/>line headline.</h2>
Tests:
Multi-line detection using getComputedStyles
function chekele(element) { var elementStyles = window.getComputedStyle(element); return elementStyles['line-height'] < elementStyles['height'] } chekele(document.querySelector('h2'));
Multi-line detection using the NYT method
function chekele(element) { var firstWordHeight; var elementHeight; var HEIGHT_OFFSET; var elementWords; var firstWord; var ORIGINAL_ELEMENT_TEXT; ORIGINAL_ELEMENT_TEXT = element.innerHTML; // usually there is around a 5px discrepency between // the first word and the height of the whole headline // so subtract the height of the headline by 10 px and // we should be good HEIGHT_OFFSET = 10; // get all the words in the headline as // an array -- will include punctuation // // this is used to put the headline back together elementWords = element.innerHTML.split(' '); // make span for first word and give it an id // so we can access it in le dom firstWord = document.createElement('span'); firstWord.id = 'element-first-word'; firstWord.innerHTML = elementWords[0]; // this is the entire headline // as an array except for first word // // we will append it to the headline after the span elementWords = elementWords.slice(1); // empty the headline and append the span to it element.innerHTML = ''; element.appendChild(firstWord); // add the rest of the element back to it element.innerHTML += ' ' + elementWords.join(' '); // update the first word variable in the dom //firstWord = document.getElementById('element-first-word'); firstWordHeight = firstWord.offsetHeight; console.log(firstWord.offsetHeight); elementHeight = element.offsetHeight; // restore the original element text element.innerHTML = ORIGINAL_ELEMENT_TEXT; // compare the height of the element and the height of the first word return elementHeight - HEIGHT_OFFSET > firstWordHeight; } chekele(document.querySelector('h2'));
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Multi-line detection using getComputedStyles
Multi-line detection using the NYT method
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Related benchmarks:
List joining in jQuery
TreeWalker vs querySelectorAll
has vs find (jiml)
has vs find (jiml | 1.1)
has vs find (jiml | 1.2)
Comments
Confirm delete:
Do you really want to delete benchmark?