#Angular text overflow ellipsis how to#

Let’s introduce a new variable in our component called showMore and use it to reveal the complete text.

This looks good till now, but we also want to provide a way for the user to read the complete text. This results in quite a good looking truncation for our purposes, though! So our users will probably never care 🙂ĬSS only truncation Adding the ‘Read More’ link In our case, we’re truncating to two lines. Note, the -webkit-line-clamp property is used to specify the lines we want to truncate to. To truncate the description text at the bottom, we’ve used the following CSS.Īs I said above, not very pretty in code. In this template, we’re creating a Flex Layout row, with the a photo on the left and the review text for our review box on the right. Please beware of sellers on this site, not all of Then, we created a new component called review-css with the following template ( ). To set up our project, we created a new Angular app, added Angular Material to use the toolbar and also included the Angular Flex Layout library to speed up our layout building. So in the absence of any other option, we’re going to use this for the time being. This appears odd since it looks like a vendor specific one – but oddly has good cross browser support. But there have been several tricks proposed and used by the dev community.įrom a reading of all though, the simplest one seems to be to use a webkit CSS property called -webkit-line-clamp. At least, not till the time this post was written. Unfortunately there is no standard, simple way to truncate multiple line text using pure CSS. Truncate multiple line text through CSS tricks

#Angular text overflow ellipsis how to#

Let’s start by looking at how to go about this with CSS. It is a good way to give users a bit of summary of the information, but also allowing to go in detail if needed. Where is this useful? Some typical examples are a reviews list, a profiles list, product list with descriptions or just about any list where you need to make sure the text fits in a specific area/box and you know you’ll receive different text lengths. In many cases, you’ll also want to include a “Show more” link or button at the end of the truncated text to allow the user to display the complete text, if he/she’s interested in the same.

This is usually accompanied by an “ellipsis” at the end to show to the user there is more text there.

In all these examples, let’s assume we have a “module”.Just to be clear, truncation means cutting off a part of the text so that it fits in a specific area on our layout and does not affect our overall design, unless when the user wants to see more of it. Mauris placerat eleifend leo.Īnd you want to limit it to exactly three lines in a container. Donec eu libero sit amet quam egestas semper. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In case that explanation wasn’t clean, imagine you have some HTML like this: There are a couple of ways to get it done, none of them spectacular. When you can count on the text being a certain number of lines, you can create stronger and more reliable grids from the elements that contain that text, as well as achieve some symmetric aesthetic harmony. That’s “line clamping” and it is a perfectly legit desire.