![]() ![]() However, text-overflow has a serious limitation: it only works on a single line of text. You can subscribe to the podcast on iTunes, Youtube, Spotify, or your favorite podcast app.Īs of today, this is what we – David and Sagi – are doing FULL TIME.ĬSS3 gave us the wonderful property, text-overflow, which can do things like create ellipsis and gracefully cut off words. Sagi has launched a podcast and community of online entrepreneurs called Mindful & Ruthless. There he teaches and gives free tips and strategies on how to build an online brand, and make it into a business while hosting a weekly podcast interviewing some of the world’s most inspiring online entrepreneurs. Thank you for reading my blog.Hacking UI was founded by us – David Tintner and Sagi Shrieber – but since then we each have gone down our own paths, and would love to invite you there.ĭavid is now working full time on Thoughtleaders – a marketplace for higly targeted content-marketing solutions for bloggers and brands. It only works in combination with the display property set to -webkit-box or -webkit-inline-box and the -webkit-box-orient property set to vertical. Thank you for reading, and let's connect! The -webkit-line-clamp CSS property allows limiting of the contents of a block to the specified number of lines. The -webkit-line-clamp CSS property allows limiting of the contents of a block container to the specified number of lines. It has survived not only five centuries, but also the leap into electronic typesetting, remaining. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Most modern browsers support it out of the box. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 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. To review, open the file in an editor that reveals hidden Unicode characters. Raw fake-clamping.scss This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. Line-clamp will allow us to state how many lines the text should cut. Alternative to -webkit-line-clamp as a mixin. 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 |