Long Post Title Misaligning Grid with Featured Image

Question

I'm putting together a grid with the featured images as the background and the post title above.

It works fine, but when the post title spreads over two lines the entry before or after is moved up/down and the grid is misaligned. I can't work out why it's doing this so any help would be appreciated!

Thanks.

My CSS:

.FacetFeatured {
width: 32.9%;
height: 140px;
display: inline-block;
margin-bottom: 4px;
background-size: 100% 140px;
}

.FacetFeatured img {
max-width: 100%;
height: auto;
}

.FacetHeadingIMG {
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
font-family: 'PT Sans Narrow', sans-serif;
}

This is the code in the template:

<?php while ( have_posts() ) : the_post(); ?>
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<?php echo '<a href="' . get_permalink( $_post->ID ) . '" title="' .     esc_attr( $_post->post_title ) . '">';?>
<div class="FacetFeatured" style="background-image: url('<?php echo $thumb['0'];?>')">
<div class="FacetHeadingIMG"><a href="<?php the_permalink(); ?>"><?php echo esc_html( get_the_title() );?></a></div>
</div>
<?php echo '</a>';?>
<?php endwhile; ?>

Answer 1

You have 2 options:

Use ellipsis by pure CSS

Add this rule to your CSS file. This will add ... whenever the title is longer than its parent DIV.

.FacetFeatured a{
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.FacetFeatured{
    max-width: 100px // Change this to fit your grid
}

This is only done by using CSS.

Strip the title by PHP

You can also strip the title by some custom length to make sure it's never broken into two lines. Use this code to do so.

function title_max_charlength($charlength, $title) {
    $charlength++;
    if ( mb_strlen( $title) > $charlength ) {
        $subex = mb_substr( $title, 0, $charlength - 5 );
        $exwords = explode( ' ', $subex );
        $excut = - ( mb_strlen( $exwords[ count( $exwords ) - 1 ] ) );
        if ( $excut < 0 ) {
            $output = mb_substr( $subex, 0, $excut );
        } else {
            $output = $subex;
        }
        $output .= ' ...';
        return $output;
    } else {
        return $title;
    }
}

Now, you can call your title like this:

echo title_max_charlength( 100, esc_html( get_the_title() ) );

And it will return 100 characters of your title. Change 100 to whatever prevents your lines from breaking.