Forum Academy Marketplace Showcase Pricing Features

SOLVED: Using "Shrink the element height if texts gets shorter" & "cut off content if element is not tall enough" at the same time

Hi there,

I am trying to create a simple 3 line text (cut off) that is expanded when I click on it - similar to Facebook.

I tried to solve it by using 2 texts - that are displayed/hiden using a simple boolean custom state.

1 is set to cut off the content and the other is set to display the entire text. I switch between the two by using a simple boolean custom state.

It works perfectly well when the text is longer than the 3 lines - however it does not shrink the element if the text is shorter than that.

Example1 - Not shrinking with short text:
Bildschirmfoto 2021-08-23 um 09.42.26

Example2 - Working as it should with long text:
5khuam

In the example 1 the “Text1” that is set to “cut off content” is not shrinking.

One solution would be if I could use the options “shrink element” & “cut off content” in conditionals or also if the “cut off content” would also shrink the element.

Maybe I am missing something.

Thanks in advance for your help! :raised_hands:
Manuel

UPDATE: I was able to solve this using an html element and some CSS.

This behavior can be done by doing the following:

  • Create a group - and inside place an html element (height 1px).

  • create another HTML element that contains your CSS-Styles and is visible somewhere on the page.

  • Create one style “Text” for the formatting of the text:
    .Text {
    font: Arial;
    font-size: 15px;
    color: white;
    line-height: 1.15;
    }

  • Create another style “CutOff” for the text that is cut off.
    .CutOff {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    }

  • Set both CSS classes to the text when it should be CutOff and add only the “Text” Style when the entire text should appear:


  • Create a boolean custom state (Yes/No) which switches when the group is clicked: When group is clicked - set State - This State is “no”

The Result: The text is CutOff to 3 lines if longer - and the element shrinks if shorter!
Bildschirmfoto 2021-08-23 um 10.39.10

PS: There are also more advanced ways to cut off the content - for example fade out. See here: Line Clampin' (Truncating Multiple Line Text) | CSS-Tricks