Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – What code to I need to add to cut off text after 3 lines and add ellipses in WordPress website?

I’m having a problem on my WordPress website (buenavistamag.com), which was built using Elementor and a paid theme called NeoTech. In the sliding thumbnail carousel on the front page, the long article titles keep making the carousel very large on mobile which is causing the carousel to interfere with the large title text. Is it possible to cut off the titles in the carousel (not the big title, only the thumbnail titles in the carousel) after 3 lines and add and ellipses to the end? If possible, can you cut it off only after a space so that words don’t get cut off mid-word? Lastly, will this solve my problem where the carousel is interfering with the featured article’s main title? If you’re confused as to what I’m talking about, please tell me so I can clarify. I tried attaching images, but I have no place to host them and create a link to them.

I don’t code, so the only solutions I’ve tried have been changing numbers related to the slider, which I believe is labeled as the ‘Hero Slider’ in the CSS style sheet style.css. I have had no luck. Does anyone have a solution?

Tags:

2

Answers


  1. 0

    Use -webkit-line-clamp

    .line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
    <div class="line-clamp">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</div>

    Note: This will work on modern browsers only

    Login or Signup to reply.
  2. 0

    Add this to your themes css file

        .hero__slide-thumb-text-holder div h2 a {
   display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search