In fact, we actually use this same method on our blog page. Where is this useful? Well, we recently used this when we had 3 columns displaying news posts and the heights of the boxes were varying heights because of the length of the title. Moreover, this feature is a combination of white-space: nowrap, overflow-x: hidden and text-overflow: ellipses, and you need to apply these properties to the. webkit-line-clamp: 2 /* number of lines to show */Īnd there you have it, the text will now only show 2 lines of text regardless of how many lines it contains. This will render an ellipsis when the text exceeds the width of. If we want to limit this so it only shows the first two lines of text we can do so by using the following CSS:- If youd like to truncate the text after a specific number of lines, pass the noOfLines prop. It can be clipped, display an ellipsis (.), or display a custom string. Suspendisse lacinia egestas felis a volutpat. The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. Fusce scelerisque eleifend lectus in bibendum. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Here is an amazing instrument for setting up typography on page with automatic coefficients, so that all kinds of text sizes (H1, H2, H3, base text and everything else) are in harmony. Nulla porta bibendum lectus quis euismod. Truncation typically comes in pair with full headline, exposed in tooltip or sliding out of ellipsis, all on hover. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. However, when you combine this with line-height: X, and max-height: X*N, it will also work in other browsers, just without ellipses. Is it possible to limit a text length to “X” amount of lines using CSS? The answer is yes. In this tutorial, we are going to show you how you can limit text length to the number of lines you would like to use with CSS.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |