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

[maze]

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.

• Text 1:
  

  
  
  
  

• Text 2:
  

  
  
  
  

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:

Example2 - Working as it should with long text:

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!
Manuel

[maze]

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!

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