How to create a read/more collapse

[jo-gross]

Hi folks, I'm struggling with the following use case and would really appreciate any suggestions you might have.

Here's my situation: I have a page with multiple cards, and each card's body contains a text field. I'd like to clamp each text to a maximum of three lines. If there's more text than that, I want a "Show more" / "Show less" button to appear.

I managed to clamp the text to three lines using line-clamp-3. However, I'm still unsure how to handle the expansion. I tried working with the collapse class, but I couldn't get it to function as intended.

For context, I'm using NextJS with Tailwind and DaisyUI in their latest versions. I’d be grateful for any ideas or best practices you could share!

This is the behavior i want to realize:

The mockup code:

    <div className={"grid grid-cols-5 m-5 gap-2"}>
          <div className={"card border"}>
              <div className={"card-body"}>
                  <div className={"card-title"}>Title</div>
                  <div className={"line-clamp-3"}>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nunc nec nunc ultricies tincidunt.
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nunc nec nunc ultricies tincidunt.
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nunc nec nunc ultricies tincidunt.
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nunc nec nunc ultricies tincidunt.
                  </div>
                  <a className={"link"}>show more</a>
              </div>
          </div>
          <div className={"card border"}>
              <div className={"card-body"}>
                  <div className={"card-title"}>Title</div>
                  <div className={""}>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nunc nec nunc ultricies tincidunt.
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nunc nec nunc ultricies tincidunt.
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nunc nec nunc ultricies tincidunt.
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nunc nec nunc ultricies tincidunt.
                  </div>
                  <a className={"link"}>show less</a>
              </div>
          </div>
          <div className={"card border"}>
              <div className={"card-body"}>
                  <div className={"card-title"}>Title</div>
                  <div className={"line-clamp-3"}>
                      Lorem ipsum dolor sit amet.
                  </div>
              </div>
          </div>
      </div>

Have you any ideas how i could solve that?

[saadeghi]

I suggest JS to cut the text based on word count and then show full text when a button is clicked, this way you will have more control on where exactly the text is cut, so it wouldn't cut in the middle of word like nunc... in the screenshot. (For example you wouldn't want a word like analytics to be cut in half 😅 and there are many words in English that wouldn't look good if cut in half)

Alternatively you can use JS to remove that line-clamp-3 when show more button is clicked.

Let me know if you have a question.

[jo-gross]

I don’t find a fixed word count very practical because the display varies depending on the layout (for example, different numbers of columns might be shown based on screen size). There’s also the option to choose a further reduced selection of columns. Cutting the text after X words results in different line lengths depending on the resolution. That’s why I’m considering a collapsible approach based on css.

I’ve greatly simplified my initial example for better explanation. From a UX perspective, I would normally just add a link with the appropriate reference for blog articles. However, in my use case, I want to keep as much information as possible in a compact format while still allowing it to be easily expanded. A collapsible solution would therefore be ideal.

Would you still handle this with a fixed word count despite the different layouts? If so, I’d be interested in hearing how you’d do it.

This is what it currently looks like: