滾動條 <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(); ?>

Answer 2

由於此規則：

media="all"
* {
    overflow-x: hidden;
}

你可以覆蓋它

      media="all"
        * {
    //overflow-x: hidden;
     overflow: visible;
        }

要么

.person, p
{
   overflow: visible;
}

Answer 3

CSS

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