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!



.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>
<?php echo '</a>';?>
<?php endwhile; ?>

1 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;
    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) {
    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.

  • 1
    Thank you for the prompt response and kind help. Not sure why it occurs in the first place, but your suggestions worked.
    – Gecko Boy
    Jul 1, 2017 at 9:32
  • @GeckoBoy You're most welcome. Because if the line breaks, the horizontal and vertical adjustment of the elements will be different. This way you can prevent the line from breaking.
    – Johansson
    Jul 1, 2017 at 12:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.