I have one div tag where I'm displaying some data, earlier It was showing all the data but now I have used this CSS to restrict no. of lines to display

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

The problem with this is it is showing only first 20-30 characters but I want to display up to 60 characters. How can I change this?


I'm not sure using CSS is the best way to "restrict the number of lines" being displayed. This would cause at least two big problems which I could see:

It's important to understand you're still downloading all of the text, but it's being hidden by the overflow: hidden; attribute.

  • The text is still being downloaded, which will be a waste because Users are downloading information they can't read and they're unnecessarily downloading data which might be bad for UX
  • You could use the height: 123px; or width: 123px; attributes, but this might not be consistent between different view ports. You may end up showing more than you intend or less than you intend.

If you must use CSS, you could use something like below:

p {
    overflow: hidden;
    display: -webkit-box;
   -webkit-line-clamp: 3; /* Limit to 3 lines */
   -webkit-box-orient: vertical;

This is a bit more friendly in the fact it shouldn't affect responsiveness, but you only have control over the number of lines, rather than the character limit.

You can see a nice little demo here: https://codepen.io/srekoble/pen/EgmyxV

I appreciate you haven't provided code relevant for this, but I'd recommend using JavaScript or Apex to return a limited character string of what you want to show. Then if the user presses a button or triggers a certain event, display the rest.

There is an argument to say this is better asked on Stack Overflow, given this is CSS rather than anything Salesforce related until you do choose to code down the Lightning JS/Apex route.

  • I was also thinking the same of limiting character in my apex class then return it. Thanks for the update Oct 11 '16 at 10:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.