Long Post Title Misaligning Grid with Featured Image

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.