![]() ![]() Because it is a child it will inherit all the styles from our original text element, so all the text will have the correct font-size and line-height etc. We create a temporary element and append it to the element which will contain the actual text. And once we go over the two lines, we stop. The easiest way to find out how many words we can fit on those two lines is to throw in one word at a time to see if it fits. Somehow, we needed to find a way to know how many words we can fit on that line and also have enough space to accomodate the button. Adding it to the end of the text, would hide the button element. I first thought of using float: right īut I would still need to know where to put the element to float. I would just check some line-height and set the overflow of your text element to hidden and be done with it.īut the button really, REALLY had to be at the end of that second line. Just a simple chore in a larger story.Īnd if we would have put the button on the next line, I wouldn't be writing this article. ![]() We thought it was a minor task, and I think we did not even bother to poker it. and at the end of line 2, show the "Read more" button. Well the designer wanted to show 2 lines of text. That doesn't sound complicated at all, does it? Just show X amount of words or Y amount of characters. So that when the user clicks the "Read more" button it will expand and show all the text. I had to build a small component which showed 2 lines of text. I asked my colleagues, but no working solution was suggested.Īnd after much frustration I thought of this option. But I ran across a small story in a recent project which made me think of this. Sometimes you had to calculate the size of your element and set the width by hand. Developers had to use this trick a lot more in the old days, when we didn't have things like flex and CSS grid and elements couldn't size themselves the way we want them too. This trick can be useful for various reasons. I want to show you a small trick to know the size of an element, before rendering that element on the screen. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |