Truncate multiple line text with Angular ngx-ellipsis Which takes us to our next way to truncate multiple line text and that is through Javascript! Unfortunately, though, there is no real solution to this. The “Show more” button always shows up, even if the text is short and fits in the same, with no truncation required. If you’re a keen observer though, you’ll notice this still has a problem. This gives us what we want! A truncated text area which can be revealed when the user needs it to. We also make the line-clamp CSS class only applicable when showMore is not enabled using the ngClass directive in Angular. We add the following to the file right below the description text. 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
#WEBKIT LINE CLAMP 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. 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.
0 kommentar(er)
