Is there anything else that needs to be done? Or do I simply copy and paste this into custom_functions.php?

Unfortunately my solution is based on number of characters rather than width.

I can refer you to the previous comment where you could fix the width of the headline and use the CSS overflow: hidden; However, this would truncate the headline abruptly so it would most likely not give you the results you are looking for.

A more interesting solution would be to add a custom field to each post called teaser_headline and make sure that these manually added short headlines make sense to the reader and are also short enough to fit. It would not be too difficult to place the short headline in a hidden element (using the thesis_hook_before_headline hook) and then use jQuery to swap the longer headline for the shorter one. This would give the desired effect of perfect layout and perfect headlines.

Regards

Russell

Thank u for your solution. I have a question hope u could answer me.

I’m running a blog in chinese. It seems that the title won’t get shortened correctly when combined chinese characters and english. Is there a solution to this? Thank u!

What you are striving for may indeed be possible, but you need to be using jQuery (the language of the browser) rather than PHP (the language of the server).

If you know the id of the HTML element you want to control than you can use the jQuery width function to set the desired width and and set the overflow-x attribute to hidden. Check out http://api.jquery.com/width/ and http://www.css3.com/css-overflow-x/

<?php echo substr($post->post_title,0,20); if ((strlen($post->post_title)>20) && is_home()) { echo “…”; } ?>

Let’s see if that comes through. Basically, it uses the PHP function, substr(), to pull the first 20 characters out of the string, which is itself pulled from the $post array. Then it checks if the title was long enough to worry about with the PHP function, strlen(), and also checks if it is the home page or not, since the whole title should be displayed on single pages or archives. The ellipsis is slapped onto the end of the string without ceremony, provided the original string was greater than 20 characters long. A more detail-oriented solution would delete the final character if it is a space, but I’m not going to bother with that at this time.

What I was really hoping for was a solution that would be aware of the containing div and would truncate the string as needed based on the size of the div, regardless of the number of characters. But I’m not sure if that’s even possible.

Cheers!

The truncation is done in javascript as there is not a suitable hook in Thesis to perform the more efficient PHP title truncation that you suggest.

You are correct about the proportional fonts hence that is why I decide to use of a conservative truncation size of 40 to allow for a few capital ‘W’s in the title.

Your second comment which I presume had some code got mangled by wordpress and came through as blank so please resubmit, maybe replacing the openign angle bracket by an ampersand (&)lt; minus the brackets.

And if it is a fixed length truncation, wouldn’t something like
post_title,0,40); if (strlen($post->post_title)>40) { echo “…”; } ?>
be more efficient?

A couple of suggestions: firstly try replacing the $ by jQuery – this gets around potential conflicts with other javascript libraries; and secondly, I think the replaceWith will be applied to the first anchor link on the page which is not correct; the replace_title PHP routine needs to get the title from the custom field using the $post variable and then yse jQuery that applies the replacement to each teaser title. Something like

function replace_title () {
global $post;
$post_id = $post->ID;
$new_title =  get_post_custom_values('my_new_title', $post_id);
?>
<script type="text/javascript">
     jQuery(document).ready( function () {
          jQuery('div .post-<?php echo $post_id;?> .teaser h2.entry-title a').html("<?php echo $new_title; ?>");
          });
</script>
<?php
}

I have not checked this but I think it is closer.

So I made an attempt to get this going, Im not sure why this is not working,

add_action (‘thesis_hook_after_teaser_headline’,'replace_title’); // replace the teaser title
function replace_title () {
?>

$(document).ready(function() {
$(‘a’).replaceWith(‘
I have been replaced
‘);
});

<?php
}