▼
Streaming live at 10am (PST)

How can I limit text in a div block?

Design help General
#1

For a page on my site, I’m trying to get the post summary to display under the featured post. However, I want the summary to cut off after the second line of text and end in “…”

For example, if the post summary in it’s entirety were “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua,” but after “Lorem ipsum dolor sit amet, consectetur adipiscing elit” it went to a third line of text, I’d like for the summary to end there rather than add a third line. Is this possible?

Additionally, when the browser size shriks (say from desktop to tablet) I’d like the summary to still end after two lines of text. Thanks for any help!

#2

@christiannc you need custom CSS for this and without much coding it will just support 1 line of text. You can add a class say ‘ellipsis’ and add this to the page’s custom code section or HTML embed

.ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

If you’re familiar with jQuery theres a library thats pretty easy to use. GitHub - josephschmitt/Clamp.js: Clamps an HTML element by adding ellipsis to it if the content inside is too long.

#3

Hmm. Where should I add this? When I tried adding it to the head or body tag it didn’t do anything to the text.

#4

Hi @christiannc you could use CH as a measuring for the amount of characters the div or the text can accept.

If you place the max size is 30ch it will only allow the size of 30 characters based on the “0”.

Look at this CSS test.

Let me know if this helps

#5

You should wrap the code above in this manner <style> .ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style>

Remember to add the ellipsis class to the text element. It can be a combo class doesn’t matter.

#6

You need to wrap the code in style tag like so:

<style> .ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style>

You can copy this now and make sure you add the class ellipsis to the text element.