As the title, today I share with you how to shorten the article title using CSS on WordPress, Blogspot . If you don’t know, please refer to it!
Purpose of shortening article title
Reading the title it sounds like it’s dedicated to WordPress but no, everyone can do it on Blogspot or hand-coded web, because it’s simply a trick with CSS.
You can apply this trick in places like: post title on homepage, recent post, popular post, recent comment,…
Its effects or benefits also depend on your aesthetic point of view, you may like it or not, but for me, it has the following benefits:
- Cut down on overly long titles to make the list more consistent and professional;
- A title with a part of it hidden can also arouse curiosity in readers, they can also click to see what the title of that article is :v
How to Collapse Post Titles Using CSS on WordPress
As I said above, it is for all types of websites, not just WordPress. Here I apply it on WordPress, so I will do the following:
Step 1: Find the ID or class of the title group you want to collapse. For example, here I want to collapse the title of the new article list on the homepage of Hocban.vn, then I find the class:
.widget-category-posts .small-post .entry-title
Step 2: Add below it the following CSS (including the class above) and the title will be shortened:
.widget-category-posts .small-post .entry-title {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
In which, the last line -webkit-line-clamp: 2;has number 2, which means the maximum number of lines that the title will be shortened.
In case the above CSS does not work, use the following snippet:
.title {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Or this paragraph:
.related-posts .entry-title a {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-inline-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
I only apply this to some screen sizes, not all. I apply this to recent comments because the commenter’s name is so long and short that I have to use it to shorten it.
Collapse post title with CSS on Blogspot
Similar to WordPress, you need to see what ID / class you need to collapse the title, then access the advanced customization section of the Template >> find the additional CSS and add the same CSS as above.
So I have finished sharing how to shorten the post title on WordPress, you guys should try it to see if it looks better
