Text trimming by characters

How To
1

Now when you output text with dynamic tags it can be trimmed by the number of words. For example, like this: {acf_em_brand_header_h2:5} - the text will be limited to 5 words.

Is it possible to do the same, only by the number of characters? It’s not very convenient to work with words. If you limit the text by characters, you will have more control. Also, such a task lacks a character after trimming, e.g., ellipsis… when visually it will be clear that the text is trimmed.

How can this be done?

1 Like
2

Since which version does the trimming of words work?

I built a code for this usecase but that would be a more prefered version.

3

I don’t know exactly. I already had this feature working in 1.5.6. After contacting support showed me how to use it. Before that I didn’t know it was possible.

1 Like
4

I had to use css to fix this. I hope they add a filter for char trimming too.

root  .your-class {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -ms-box-orient: vertical;
    -moz-box-orient: vertical;
   -webkit-line-clamp: 3;
    overflow: hidden;
}
4 Likes
5

but were you able to have the “…” ellipsis?

6

You can add:

text-overflow: ellipsis;

will add “…” after the character clamping.

:slight_smile:

7

I tried it but didn’t work.

8

Sorry, here is a bit more in-depth:

root  .your-class {
max-width: 15ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
1 Like
9

Hi, has this problem been solved? I also want to limit the output by the number of characters, not the number of words.

10

Thanks , this method works great!