php - <p> 文本上的滚动条

Question

我遇到了这个问题，我所有的文本都包含在 <p> 中或标题标签，将导致溢出滚动条类型显示(您将能够稍微滚动它)。我设置了overflow没有，甚至没有设置高度。此外，大部分 显示了整个文本(有时滚动会截断文本的最底部)。

此问题在此页面上最为突出:http://www.salonathon.org/meet-the-staff/ 在每张卡片的标题和说明上。

我搞砸了设置高度并重新禁用所有元素的溢出，这并没有解决任何问题。

顺便说一下，这是一个 WordPress 网站。 (此外，这是我第一次尝试为 WordPress 制作主题，所以如果我做的事情非常错误，请随时告诉我。)

以下是相关的代码:

---- PHP ----

    <section class="header-margin staff-page">
        <h1 class="page-title"><?php the_title(); ?></h1>
    <?php $args = array(
            'category_name' => 'staff',
            'meta_key'   => 'staff-order',
            'orderby'    => 'meta_value_num',
            'order'      => 'ASC',
            );

    $the_query = new WP_Query($args); ?>
        <?php if ( $the_query->have_posts() ) : ?>
            <ul>
                <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                        <li>
                            <div>
                                <?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
                                        <?php the_post_thumbnail('full');?>
                                <?php endif; ?>
                            </div>

                            <div>
                                <h4 class="person"> <span class="name"> <?php the_title(); ?></span>  |   <?php the_excerpt(); ?></h4>
                                <p> <?php the_content(); ?></p>
                            </div>
                        </li>
                <?php endwhile; ?>
            </ul>
            <?php wp_reset_postdata(); ?>

        <?php else : ?>
            <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
        <?php endif; ?>

    </section>
</main>

---- CSS ----

.header-margin{
    margin-top: 128px;
}

.staff-page {
    overflow: hidden;
}

h1.page-title {
    text-align: center;
    font-size: 50px;
    margin: 40px;
}
    .staff-page > ul {
    list-style: none;
    width: 85%;
    margin: 0 auto;
    padding-left: 0;
}

.person {
    font-family: 'Proxima Nova', sans-serif;
    font-size: 21px;
    font-weight: normal;
    padding-top: 10px;
    margin: 0;
    text-align: left;
}

.name {
    font-family: 'salon6';
    font-size: 28px;
}

.staff-page > ul > li {
    display: block;
    margin: 20px 0;
}

.staff-page > ul > li > div > img{
    width: 180px;
    height: 180px;
    display: inline;
}

.staff-page > ul > li{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: row;

    justify-content: flex-start;
    -webkit-justify-content: flex-start;

    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;

    background-color: white;
    -webkit-box-shadow: 0px 2px 11px 0px rgba(0,0,0,0.07);
    -moz-box-shadow: 0px 2px 11px 0px rgba(0,0,0,0.07);
    box-shadow: 0px 2px 11px 0px rgba(0,0,0,0.07);
    padding: 20px;
}

.staff-page > ul > li > div:nth-child(2){
    padding-left: 25px;
    line-height: 15px;
    max-width:75%;
}

Answer 1

在下面的代码中使用 line-height: 15px; 会导致滚动条出现不良行为。

CSS:

.staff-page > ul > li > div:nth-child(2){
    padding-left: 25px;
    line-height: 15px;
    max-width:75%;
}

为此:

.staff-page > ul > li > div:nth-child(2){
    padding-left: 25px;
    max-width:75%;
}

同样在 php 中改变这个:

<p> <?php the_content(); ?></p>

为此:

<?php the_content(); ?>