I want to show you a little trick to know the size of an element, before giving that element on the screen.
This strategy can help for a variety of reasons. The developers had to use this trick a lot in the old days when we didn’t have things like flex and CSS grid and things couldn’t measure up the way we wanted them to. Sometimes you had to calculate the size of your object and set the width by hand.
What is the main problem?
I had to create a small piece showing 2 lines of text. So, when the user clicks on the “Read more” button it expands and shows all the text. It doesn’t seem complicated, does it? Show only the sum of words X or the sum of letters Y. What are you complaining about?
By the way, the designers wanted to show 2 lines of text. And at the end of the 2nd line, show the “Read more” button. Like:
“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec…Read more”
We thought it was a small task, and I think we didn’t even bother playing poker with it. Simple work in the big story.
And if we put the button on the next line, I will not write this article. I will check some line-height and set it to hide the overflow of your text element and do with it.
But the button really is, really should be at the end of that second line. Designer, right? Right?
You cannot fix this with CSS. I first wanted to use float: right;
But I still need to know where to place the element for the float. Adding at the end of the text hides the button element.
Somehow, we need to find a way to find out how many words fit in that line and whether there is enough space to adjust the button.
What is the solution?
The easiest way to find out how many words we fit in those two lines is to see if they fit into one word at a time. And after we go over two lines, we stop. Easy.
We create a temporary element and associate it with the element that contains the actual text. Since it is a child, it inherits all the styles from our parent text element, so all the text has the right font size and line-height, etc.
We fill in the source word with the word and see if the words fit in our two lines (+ our buttons). And when we go in two lines, we stop. Once we have the right amount of text, we can capture our temporary element.
Performance process, finding the amount of text that appears
Now that we have the correct text to fit, we will copy that part of the text into the original text element that appears on your screen. And behind it will be your button, the way we planned it.
Example:-
const createMaxLines = () => {
// create the temporary Element
const ruler = document.createElement('div');
ruler.style.width = 'auto';
ruler.style.position = 'absolute';
ruler.style.whiteSpace = 'nowrap';
// Adding the element as a child to myElement.
// it will be added to the DOM
myElement.appendChild(ruler);
/**
* Do the calculations you need to do
*/
// clean up after yourself
myElement.removeChild(ruler);
};
How about performance?
You should not try this with the whole thing of “war and peace”, but this choice is usually made with one to two lines of text and should be neat.
You can improve performance somewhat by using better algorithms to find out how many words fit.
Conclusion
This is a good trick if you need to calculate the size of your element before it shows up on your screen.
You don’t need it much, because in most scenarios these days, you can fix it with CSS. But in those rare cases CSS can’t help you, it can do the trick.
People having good knowledge of Financial accounting can get an Accounting Certification from StudySection to increase their chances of getting a job in this field. You can get a foundation level certification if you are new to Financial accounting or you can go for advanced level certification if you have expert level skills in Financial accounting.
