billyb2

Hi, I’m new here and was looking up another item when I stumbled across this post. I just solved this on our own page and thought you could use this.

The responses above work great for a single line of text. Just in case someone in the future is looking to limit it to n lines of text, you can use the code below.

The slider by default displays all of the text on the page you link to it. In order to make this usable, use the following CSS to limit the text to 3 lines, add an ellipsis, and shrink the text when the window shrinks. You can edit the sizes to fit your style. I added the max-width lines to shrink the text for smaller screens.

Place this in the “Additional CSS” section in the theme (in WordPress)

.hs-slide-cap-desc { display: block; display: -webkit-box; max-width: 100%; height: 3.75em; margin: 0 auto; font-size: 25px; line-height: 1.25em; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
@media screen and (max-width: 720px) { .hs-slide-cap-desc { font-size: 18px; } }
@media screen and (max-width: 580px) { .hs-slide-cap-desc { font-size: 16px; } }