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
Ag grid 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. 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)
