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%;
    }

<p>文字

3 个答案: