Skip Navigation

[Resolved] Only 2-3 lines of description in dynamic source text

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 6.24 hours from now. Thank you for your understanding.

This topic contains 14 replies, has 2 voices.

Last updated by maiS 1 month, 1 week ago.

Assigned support staff: Christian Cox.

Author
Posts
#1969153
Skærmbillede 2021-02-27 kl. 19.20.50.png

Hi there,
I added a custom field with a dynamic souce that shows text but i only want 2-3 lines of the text and not the whole thing - is it possible to set this up?

#1969669

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

Hello, there is no built-in way to truncate the text from a custom field like this directly in Blocks. One way you could achieve something similar is to apply some CSS that sets a maximum height for these blocks, and optionally apply text-overflow properties to trim the text output with an ellipsis:
https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Another option is to use custom code to create a shortcode that truncates the text string after a specific number of words or characters. However, this option does not always create identical heights different text truncated by word or character count can produce an inconsistent number of lines of text. The CSS option is preferred in this case, because you can specify a consistent maximum height for the elements regardless of their text content.

#1971421

Hi Christian,

Okay sounds good. Where do i insert the CSS? When i hit the single field i do not get the CSS option.

#1972231

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

sf-block.png
ct-editor.png

You can add CSS in Appearance > Customize > Additional CSS, and it will be injected on every page of the site. Or if you are designing a Content Template in the Block Editor, you can add custom CSS code in the sidebar of the CT editor. This CSS will only be injected on pages that apply this Content Template. See ct-editor.png. Something like this custom class your-class:

.your-class {
  /* place styles here */ 
}

Then select the Single Field block and add your-class CSS class in the sidebar of the block editor (see sf-block.png).

#1972873

hi Christian,

I am sorry but i do not see any options at all for adding CSS to my view.. can you help me? I am sorry.

#1973579

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

block-navigator.png

If you want to add the CSS code in a View, you must select the top-level View block. Then you'll find a custom CSS panel in the sidebar. You can use the Block Navigation menu at the top of the editor to easily select the top-level View block.

#1975459
Skærmbillede-2021-03-05-kl.-10.25.06.jpg

Hi christian,

Thanks!

But i still don't get it - i copied the exact CSS you guided me to and i get a completely different result - look at this

#1977481

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

Right, these links are not cut-and-paste solutions, they are educational resources you can use to understand the concepts involved here. Unfortunately I don't have a cut-and-paste solution for you.

#1977579
Skærmbillede 2021-03-07 kl. 17.17.06.png
Skærmbillede 2021-03-07 kl. 17.14.14.png
Skærmbillede 2021-03-07 kl. 17.14.04.png

Hi Christian,

Can you please help me? Something weird is happening. I can not answer any of my tickets. I wanted to create a new ticket to tell you guys this but I get redirected to what looks like a profile page without any option for support. Every time I want to start a new ticket I get redirected.

I managed to come to this thread with the option of messaging you via the email notification that has a button that says "Add your message".

Please see the screenshots.

Please do not just shut me down like this. Can you please tell me what is going on? I have som very important support threads going right now.

#1977605

And yes I made sure that I am logged in

#1977735

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

Hi, first I would try logging in with a different browser to see if that fixes the problem. If not, I'll need to raise a ticket with my systems team. Let me know what you find out.

#1979783

Hi Christian,
I think all tickets are working again now. Thanks.

So i made the CSS for the text-overflow function but i have a small question. My CSS is this:

.hidetext {
white-space: nowrap;
overflow: hidden;
text-align: center;
height: 50px;
width: 100%;
text-overflow: ellipsis;
}

But when you go to the page hidden link and look at the 2 camps:

Solrød Camp 2020
Værløse Efterårs Camp

It is like the ellipsis; part isn't working - i would like the 3 "..." to finish the text but it just seems like width is cutting some of the text off and also the Solrød camp text is not centered.

Can you in any way help? Its just those 2 details.

#1979805

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

One of those documents has a link "Looking for truncating to a particular number of lines?" and it goes here:
https://css-tricks.com/line-clampin/

That seems to include information about truncating to a specific number of lines, maybe you can find some additional information there?

#1981335

Thanks Christian, I think I figured it out!

#1981337

My issue is resolved now. Thank you!