How to Restrict Post Titles to Two Lines in WordPress Using CSS

Long post titles can sometimes disrupt your website’s layout, making it look cluttered and unorganized. This is especially common in WordPress blogs where dynamically generated content can lead to inconsistent title lengths.

Why Restrict Post Titles to Two Lines?

By restricting post titles to two lines, you ensure a clean, professional, and uniform design across your site. When Post title lines are not uniform, it affect the layout of a website making them look unprofessional.

For a more detailed guide, watch our step-by-step YouTube tutorial here:

The Problem: Unequal Post Title Lengths

If your blog or archive page displays post titles without any restrictions, some titles may span multiple lines, creating an uneven layout. This is particularly noticeable when using Blocksy, Astra, GeneratePress, or other WordPress themes.

Fortunately, a simple CSS trick can limit post titles to two lines while ensuring any overflow text is neatly truncated with an ellipsis (...).

How to Restrict Post Titles to Two Lines Using CSS

Step 1: Identify Post Title Class

Before applying CSS, you need to identify the CSS class of the post title element.

1. Right-click on the post title in your browser and select Inspect (Developer Tools).
2. Look for the HTML tag wrapping the title. In blocksy themes, it can be found in an <h2> tag with a class like .entry-title or .post-title.
3. Note the exact class name to use in your CSS.

For example, in the Blocksy theme, the post title structure looks like this:

<h2 class="entry-title">
    <a href="your-post-link">Your Post Title Goes Here</a>
</h2>

Step 2: Add the CSS Code

Now that we have identified the class, we can apply CSS to limit the title to two lines.

Go to your WordPress Dashboard → Appearance → Customize → Additional CSS, then paste the following code:

h2.entry-title {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Restrict title to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

Explanation of the CSS Code:

• display: -webkit-box; → Enables multi-line truncation.
• -webkit-line-clamp: 2; → Restricts the text to two lines.
• -webkit-box-orient: vertical; → Ensures vertical text flow.
• overflow: hidden; → Prevents content from overflowing the container.
• text-overflow: ellipsis; → Adds ... when text is truncated

Step 3: Save and Test

1. Click Publish in the WordPress Customizer.
2. Refresh your website and check if the post titles are limited to two lines.
3. If needed, tweak the CSS class selector based on your theme’s structure.

How This Works with Blocksy Posts Shortcode

If you’re using the Blocksy Posts shortcode to display posts dynamically:

[blocksy_posts limit="6" has_pagination="no"]

The same CSS rule applies, as long as Blocksy’s post title class is targeted correctly.

Final Thoughts

Applying this CSS trick ensures consistent and visually appealing post titles across your website. Whether you’re using Blocksy, Astra, GeneratePress, or any WordPress theme, this method will help you maintain a clean layout.

🔔 Subscribe for More Web Design Tips!