My thumbnails are generated by users’ posts, and the title is written underneath. My thumbnails are 156px wide.
Currently I am using mb_strlen to limit the number of characters to 24, followed by …
If someone’s title is
‘Once upon a time, Tom’s house burned down.’
The title under the thumbnail appears as
‘Once upon a time, Tom#&s…’
which fits (even though I can’t solve the apostrophe problem – please help with that too).
But if the title is
‘ONCE UPON A TIME, TOM’S HOUSE BURNED DOWN.’
then it drops to a second line because the text is wider (even though in this edit box the text is uniform), and it appears like this
‘ONCE UPON A TIME
, TOM#&S…’
In order to accommodate the capital letters people sometimes use, I would have to set the mb_strlen to about 12, which is useless in English language.
So can someone please show me how to change the code below so that the 156 pixel width is respected rather than the character count?
<p><a href="<?php the_permalink() ?>"><?php if ( mb_strlen(get_the_title()) >= 24 ) echo mb_substr( get_the_title(), 0, 24 ).'...'; else the_title(); ?></a></p>
I think the best solution to your problem would be one like this one, using CSS and a jQuery fallback for older browers?
Truncate text with jQuery based on pixel width