The max-height of the inner element should be one “line” taller than the outer element.For my scenario, I already had a link within a heading, but if you don’t then you will need to nest a span or div. There are a few things worth pointing out here: See the Pen CSS Line Clamping - Fade Out Only by Jacob Fentress ( on CodePen. (Resize your browser to see the truncation in action below.) My next step was to develop a new “fade out” fallback method that would overcome the “only truncate when the text is longer than this” problem. I just wanted to avoid the potential performance hiccups – particularly on a page that was already pretty heavy with JavaScript. Admittedly, in real-word use, resizing isn’t that common of a use case. I didn’t want to have to recalculate dimensions on that many elements every time the window was resized. So, why not just use JavaScript? It certainly would have made things easier, but in my situation, I would have up to 50 or so elements on a page that needed potential truncating (a list of titles). The “fade out” method seems to be the best bet for those other browsers (outside of much more complex techniques), but I really wanted to avoid the effect if the text wasn’t long enough to actually be truncated. an ellipsis to indicate the truncation (placed appropriately in relation to the text, if possible)įor my use, the -webkit-line-clamp method looked the best, but I needed a decent fallback for non-webkit browsers.So, I began to work on a better solution. It turns out that this is a really difficult effect to pull off reliably and effectively across browsers. Thank you for reading my blog.A recent project called for multi-line text truncation, but I wasn’t happy with any of the current techniques. Thank you for reading, and let's connect! Most modern browsers support it out of the box. I was surprised the browser support for this is quite good. So far, this is by far the easiest way to achieve this, but it has some odds and ends, like having to use the display format. p Īs you may have spotted, for now, this only works if the display method is webkit-box. Line-clamp will allow us to state how many lines the text should cut. We'll be using line-clamp to solve this to get right to it. Let's see how we can solve this in the modern-day age. This is way bigger than just three lines, right. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam massa ante, tincidunt quis metus ut, consequat facilisis risus. Curabitur eros tellus, scelerisque sit amet suscipit consequat, laoreet at quam. Aenean sollicitudin luctus est ac gravida. Integer consequat eros vel tortor tempor, et vulputate turpis pretium. Morbi rutrum lectus turpis, sit amet sollicitudin eros condimentum vitae. The HTML for this assignment is super basic. See the Pen CSS Modern multi-line ellipsis by Chris Bongers ( CodePen. Today I'm looking into a more modern and straightforward approach to solve this truncate problem. I wrote an article on truncating text with ellipsis, and we used a fail-safe version for the multi-line ellipsis. Looking at a modern solution to cut paragraphs to x lines in CSS 27 Apr, 2021
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |