We knew the image size, but the title and excerpt sizes were the variables here. We didn’t want to cut off the title, so we had to figure out a way to check how much space the title occupied, then figure out how much space was remaining for the excerpt. If the excerpt was larger than the space remaining, we needed to trim the excerpt toward the end and add [...] to indicate the excerpt was truncated.

The following photos are of the homepage layout…each post was shown on the homepage as one of these wide, image, title, and excerpt combinations.

The first photo below shows how we wanted the excerpts to be displayed. The second shows what happens if the excerpt isn’t truncated based on the title size…not good.

Without dynamically truncating the excerpt, a long post title will make it overflow it's container

Dynamically truncating allows us to account for varying title lengths to prevent excerpt overflow

This will require you to put your thinking cap on, so dig it out from under that pile of clothes, beer cans, or whatever it is you leave all around your house, and set it top of that little idea factory you call your head.

The Code I Used

Here’s the code I used to get it done…you’re welcome to copy this code, but be sure to read the rest of this post as you’ll have to change a few things depending on the font family and font sizes used on your blog.

<?php
// Dynamically resize excerpt according to title length
$rem_len = ""; //clear variable
$title_len = strlen($post->post_title); //get length of title
if($title_len <= 35){
	$rem_len=188; //calc space remaining for excerpt
}elseif($title_len <= 70){
	$rem_len=146;
}elseif($title_len <= 105){
	$rem_len=104;
}elseif($title_len <= 140){
	$rem_len=62;
}
$trunc_ex = substr($post->post_excerpt, 0, $rem_len); //truncate excerpt to fit remaining space
if(strlen($trunc_ex) < strlen($post->post_excerpt)) $trunc_ex = $trunc_ex . " [...]";
echo "<p>" . $trunc_ex . "</p>"; //display excerpt
?>

Now the explanation

First, I took the font used for post titles on the homepage and calculated (roughly) how many characters it took to fill out a full line within the space allocated. That number turned out to be about 35 characters per line.

Calculating number of characters per line in the title resulted in 35

Then I did the same for the post excerpt font. Turns out that the post excerpt font takes up 42 characters per line.

Count number of characters per line in the post excerpt gave me 42

Then I figured, since every 35 characters in the title takes up one line, and 42 characters of the excerpt occupy a full line, then for every 35 characters in the post title, that was 42 more characters I’d have to truncate off the excerpt text.

You also have to consider the fact that the post title is a block level element. In other words, even if the post title only takes up half a line, the post excerpt won’t begin until the following line.

How to Edit the Code for Your Blog

So, to make it work for you, you need to figure out the maximum number of excerpt characters that will fit inside your div element along with 1 line of post title. For me that was 5.

Then edit the code I gave you above as follows:

Replace the number 35 in the following line with the number of characters per line for your title:

 if($title_len <= 35){

Then skip a line and replace the number 70 in the following line with 2 x the number of characters per line for your title:

}elseif($title_len <= 70){

Then skip another line and replace the number 105 in the following line with 3 x the number of characters per line for your title (are you seeing a pattern here?):

 }elseif($title_len <= 105){

Then skip another line and replace the number 140 in the following line with 4 x the number of characters per line for your title:

 }elseif($title_len <= 140){

Now, you may want to keep going, I repeated this 4 times because I figured I could fit one line of excerpt in with 4 lines of title at the most.

Now you need to go back and remember the total number of excerpt characters you figured would fit inside that div element. Got that number in front of you? Good. Now you’ll need the number of characters per line for your excerpt font. Now subtract the number of characters per line from the total excerpt characters that could fit in the div element. Whatever that number comes to, put it in place of 188 in the following line of code from above:

 $rem_len=188; //calc space remaining for excerpt

Now take the number of excerpt characters per line x 2 and subtract that from the total excerpt characters that would fit inside the div. Now put it in place of 146 in the following line of code from above:

 $rem_len=146;

Now take the number of excerpt characters per line x 3 and subtract that from the total excerpt characters that would fit inside the div. Now put it in place of 104 in the following line of code from above:

 $rem_len=104;

And finally, take the number of excerpt characters per line x 4 and subtract that from the total excerpt characters that would fit inside the div. Now put it in place of the 62 in the following line of code from above:

 $rem_len=62;

That’s it. Now your excerpt should automatically resize itself depending on the length of the post title.

Hey, Copyblogger uses it, so it must work, right? Anyway, here’s a quick rundown of how to do it…

Open up index.php for your WordPress theme…as usual, use the default theme as a reference if you’re having trouble following along. Find the following line (it’s line #12 on the default theme):

<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

The only thing you need to change is what’s between the single quotes of the_content(‘…….’); – now change it so it looks like this:

<div class="entry">
<?php the_content('Click to continue &rarr;'); ?>
</div>

The “→” part is just the ascii code for a right arrow. Now your Read more link will look like this:

Click to continue →