Limiting the length of blog post titles by word count, specifically how to limit blog post title in Elementor, can enhance your blog’s design and readability, ensuring a neat and structured appearance that improves user experience.
Using the Blog Listing widget like The Plus Addons for Elementor, you can effortlessly set limits on post titles by both character and word count but it is always idea to limit the number of plugins installed on your website as this could affect your website load time.
If you’ve ever built a blog or post grid using Elementor (especially with Essential Addons or the Posts widget), you might’ve noticed some blog titles get too long and break your design. A clean grid can suddenly look messy — especially on mobile.
So, how do you limit blog post titles, specifically how to limit blog post title in Elementor, to just 2 lines with an ellipsis (…)?
This guide will show you step-by-step how to limit blog post titles in Elementor by line count, using a simple CSS trick — no coding experience needed!
Someone like me like to use Elementor Page Builder Plugin especially if I am to build a website from scratch by myself as it makes my design process very easy and I can always reuse my custom templates on other project and for this reason Elementor Page Builder has been my No. 1 tool for website design
Why Limit Blog Post Title Length?
Here are some reasons why we need to limit blog post title length:
Keeps your layout neat and consistent
Prevents long titles from wrapping awkwardly
Improves user experience (especially on small screens)
Looks way more professional
For example, the Elementor Essential Addons has a widget called “Post Grid” but only has the option to limit post title by words. For example If you set the limit length to “7” It means it will only show 7 words for the title and hide other. This will make post title with longer word unreasonably shrinked.
READ ALSO: LEARN ANDROID APP DEVELOPMENT FOR BEGINNERS
How to Limit Blog Post Title in Elementor
To do this in Elementor, we’ll use CSS line clamping — a modern, clean method supported by most browsers.
If you using a Elementor Page Builder Pro, there’s a custom css column in the Advanced section of the widget editor which just require that you copy and paste the code below into.
But if you’re using a Free Version of Elementor, you will need to install the Plugin called WpCode shown below.
- Go to Plugin Section in your WordPress dashboard and click on Add Plugin
- In the Plugin Installer page, search for WpCode, Install and Activate it.
Prefer to follow the video guide? Watch the Video Below
How to Limit Blog Post Title in Elementor Using CSS
1. Inspect Your Title Element
If you’re using Essential Addons Post Grid, right click on the blog post layout in the frontend and select “Inspect(Q)”. Your blog layout should look as described below if you’re using Essential Addons Post Grid widgets
<h2 class="eael-entry-title"> <a class="eael-grid-post-link" href="#">This is a very long blog title that needs to be cut</a> </h2>So, all we need to do is target that anchor (<a>) tag.
2. Add the Following CSS
Go to: WpCode and add a new snippet. Give it any name and paste the code below, Don’t forget to turn on the “Active” Button then Publish It
.eael-entry-title a {
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal !important;
line-height: 1.4em;
max-height: calc(1.4em * 2);
}Add the css above to WpCode Plugin Snippets
OR goto
WordPress Dashboard → Appearance → Customize → Additional CSS
Click Publish. Then refresh your page.
.eael-entry-title a {
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal !important;
line-height: 1.4em;
max-height: calc(1.4em * 2);
}
What This Code Does (Plain English)
| CSS Rule | What It Does |
|---|---|
display: -webkit-box | Sets up the element for clamping |
-webkit-line-clamp: 2 | Limits the content to 2 lines |
-webkit-box-orient: vertical | Tells it to flow lines top to bottom |
overflow: hidden | Hides any extra text |
text-overflow: ellipsis | Adds the ... at the end |
white-space: normal | Makes sure text wraps properly |
line-height & max-height | Controls the space and max height |
Does This Work on Mobile?
Yes! It works across all screen sizes — the clamping adapts automatically.
You don’t need separate mobile styles.
Final Thoughts
Clean design matters — and limiting post title length with CSS is an easy way to keep your Elementor blog layout sharp, consistent, and user-friendly.
Whether you’re a beginner or seasoned designer, this small tweak makes a big difference.
