长帖子标题使网格与特色图像不对齐

时间：2017-06-30 作者：Gecko Boy

我正在整理一份grid with the featured images 作为背景和上面的帖子标题。

它工作得很好，但当帖子标题分布在两行上时，前后的条目会上移/下移，网格会错位。我不明白为什么它会这样做，所以任何帮助都将不胜感激！

谢谢

我的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;
}
这是模板中的代码：

<?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; ?>

1 个回复
最合适的回答,由SO网友:Johansson 整理而成

您有两种选择：

使用纯CSS的省略号将此规则添加到CSS文件中。这将添加... 每当标题比其父DIV长时。

.FacetFeatured a{
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.FacetFeatured{
    max-width: 100px // Change this to fit your grid
}
这只能通过使用CSS来完成。

通过PHP去除标题，您还可以将标题去除一些自定义长度，以确保它不会被分成两行。使用此代码执行此操作。

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;
    }
}
现在，您可以这样称呼您的标题：

echo title_max_charlength( 100, esc_html( get_the_title() ) );
它将返回标题的100个字符。将100改为任何可以防止线路中断的值。

结束
标签： post-thumbnails   get-the-title   小码农  

相关推荐