When Text Cut Off Content

Questions
1

Is it possible to know if the text element is cutting off content in a dynamic way? I have a text element that is going to be mobile responsive, I’m using the cut off content feature of text elements.

I want to put a read more button under the text element but hide it when it is not necessary. So, is there any way to dynamically detect if the text element is cutting off content to use that value in a conditional on a button?

At times when the text element may expand to 600px width the cut off content will not trigger as the content can fit fully at 600px, but when contracted to 400px the content will get cut off. How can I set up a conditional on the button to hide when it is not needed as the content in the text element is not getting cut off.

This all needs to be dynamic as it is in a repeating group and each text element content will be unique and the number of characters will be unknown.

2

I would attempt to determine how many characters of a specific font/size fit in that text element at its specific container’s width and build the condition from there. Cannot think how to approach this any other way.

1 Like
3

Thanks, that is something I’ve suggested in the past as well, was hoping maybe there’d be a way. This issue has been brought up since 2016 and seems like it should be possible to push out a fix by the way of having a conditional yes/no value.

From my perspective, if the code used to determine if the content is too much for the element, which causes it to be cut off, there should be a way to pass that determination through a yes/no value that we could access.

Something like “Text ABC content is cut off is yes” to be used in conditionals.

I also thought perhaps there was a plugin that I wasn’t able to spot that could do that.

1 Like
4

Makes sense :+1:t2:

Let’s see if within the changes they are planning under their new editor, vertical management is something they address.

5

hey @boston85719

Any luck on this? Having the EXACT same problem.

Jack

6

No…you may want to add it to the Bubble ‘ideaboard’

7

I hacked together a workaround in JS and successfully implemented it using toolbox. Maybe someone can spend the time to wrap this into a plugin. This solution relies on MutationObserver() to monitor the text element for changes and matches for the content text ends in elipses (…), which indicates it has been cut off. FYI This method will also trigger if the text content simply ends in ... and it is not actually cut off.

How to implement – The toolbox way
There are, I know other (let’s be honest–possibly better) ways to do this. But here we go

  • Give the text element an ID

  • Create bubble workflow that triggered when condition is true text element is visible (run once)

  • Add Toolbox Run Javascript step to workflow that was just created and include the following snippet. Change your element id to reflect the text element id you just setup. This establishes the MutationObserver() which will watch the text element and fire any time the text changes (and other some attributes as well which will ignore).

      //given a text, check for ellipses at the end  and return  if present 
  window.txtMutMatch = function(txt){
     if ( txt.match(/\.\.\.$/) ){
        bubble_fn_cutoff(true)
     }
     else{
        bubble_fn_cutoff(false)
     }
  }

  //given a mutation event, run match element text function on the element's text
  window.txtMutCallback = function(e){ 
     txtMutMatch( e[0].target.textContent.trim() );
  }

  // monitored element's id
  let txtMutTarget = document.getElementById('desc_text');

  //setup the element observer
  let txtMutConfig = { attributes: false, childList: true, subtree: false };
  let txtMutObs = new MutationObserver(txtMutCallback);
  txtMutObs.observe(txtMutTarget, txtMutConfig);

  //Check the initial presence of ellipses
  txtMutMatch(txtMutTarget.textContent.trim());

  • Setup JS to bubble element on the page to receive the status of the function that is run when the monitored text element is changed. Set the element to publish value of yes/no In this case the JS to bubble function is called bubble_fn_cutoff()and will publish a state value of yes or no if the monitored text is cut off. You can now use the JS to bubble element to get the cut off value to use in any workflows or conditional inside bubble.

Voila
edit: updated code for readability and initialization

4 Likes
8

@jon2 you legend! Thank you for this code and for the explanation

1 Like
9

Hello, I believe I’ve found a better approach than using JavaScript.

On the ‘read more’ button, add a conditional element with something like this:
If ‘text’s height’ is above than [‘max height’-15], then show ‘show more’.

This essentially means that if the current text’s height is lower than the maximum height, there’s no need to display the ‘show more’ button.

I found it safer to add the “-15” because your text area will cut off after the last entire possible line.
As example, in my case, with a max height of 300, it ended up that the actual cut off height was 292,5 because it stope right after the last possible height.

however, I have not found a way to specify dynamically [‘max height’-15] without using a workflow. In my case, I ended up hardcoding the value in the condition. It’s bad but easier :confused: