如何避免这个标题泛滥？

Question

只是玩创造一个免费的wordpress主题，但我困住了，因为标题的帖子似乎溢出时，它很长。

请告诉我怎么解决这个问题。

这是显示错误的图像。

​

​

红色边框是把容器往下推的那个。

谢谢你的帮助。

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.posts-not-found {
  border: 2px solid red;
  padding: 20px;
  left: 65px;
  right: 65px;
}
.layerit {
  width: 100%;
  height: 100%;
  padding-top: 150px;
  margin: 0 auto;
  background: rgba(0, 0, 0, .3);
  padding-top: 150px;
  position: relative;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  transition: background-color .9s ease;
  border: 1px solid white;
}
.navbar a {
  padding-top: 30px;
}
.navbar-brand {
  font-size: 25px;
}
.home-title {
  color: white;
}
#title-text {}
.home-author {
  color: white;
  padding-top: 20px;
  padding-bottom: 20px;
}
.no-margin {
  padding: 0;
  margin: 0;
}

HTML

<?php get_header(); ?>
<div class="row">
<?php
if (!have_posts() ) : ?>
    <div class="posts-not-found">
        <h1>Nothing Found</h1>
            <p>It seems we can’t find what you’re looking for. Perhaps searching can help.</p>
    </div>
<?php endif; ?>

<?php
if ( have_posts() ) { 
while ( have_posts() ) : the_post();
 ?>
<div class="col-md-4 col-sm-6 col-xs-12 no-margin">
    <div class="layerit">
        <h2 id="title-text" ><a class="home-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="home-author">by <?php the_author(); ?> on <?php echo get_the_date(); ?> </p>

    </div>
</div><!-- /.blog-post -->

 <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
            <?php the_title(); ?>

    <?php endif; ?>

 <?php
 endwhile;
}

 ?>
</div>
 <nav>
 <ul class="pager">
 <?php if ($wp_query->max_num_pages > 1 ) : ?>
 <li><?php next_posts_link('Older Posts'); ?></li>
 <li><?php previous_posts_link('Newer Posts'); ?></li>

 <?php else: ?>
        <li>No Newer/Older posts</li>
<?php endif; ?>
</ul>
 </nav>

 <div class="row before-footer-area">
    <hr class="hidden-xs hidden-sm">
    <div class="col-md-4 hidden-xs hidden-sm">
     <?php if ( is_active_sidebar( 'footer-1' ) ) { dynamic_sidebar( 'footer-1' ); } ?>

    </div>
    <div class="col-md-4 hidden-xs hidden-sm">
     <?php if ( is_active_sidebar( 'footer-2' ) ) { dynamic_sidebar( 'footer-2' ); } ?>

    </div>
    <div class="col-md-4 hidden-xs hidden-sm">
    <?php if ( is_active_sidebar( 'footer-3' ) ) { dynamic_sidebar( 'footer-3' ); } ?>

    </div>
 </div>


<div class="row">
<div class="col-md-12">
<?php get_footer(); ?>
</div>
</div>

Answer 1

你的灰色区域是由顶部填充和标题和作者文本占据的空间。当标题或作者有多行文本时，灰色区域将扩展。

您可以：

1. 用省略号、CSS text-overflow: ellipsis;或WordPress wp_trim_words剪短标题。
2. 允许文本向上移动，在灰色区域顶部占据更多的灰色空间。文本标题将共享一个基线，但不共享顶部一行。

下面是选项2的一个示例：

​

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
 .layerit {
  min-height: 300px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid white;
}
.intro {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  transition: background-color .9s ease;
}
.home-title {
  color: white;
}
.home-author {
  color: white;
  padding-top: 20px;
  padding-bottom: 20px;
}
.no-margin {
  padding: 0;
  margin: 0;
}

<div class="row">

  <div class="col-md-4 col-sm-6 col-xs-12 no-margin">
    <div class="layerit">
      <div class="intro">
        <h2 id="title-text"><a class="home-title" href="#">Some really long title. Some really long title. Some really long title. Some really long title.</a></h2>
        <p class="home-author">by Author on 1/1/2001</p>
      </div>
    </div>
  </div>

  <div class="col-md-4 col-sm-6 col-xs-12 no-margin">
    <div class="layerit">
      <div class="intro">
        <h2 id="title-text"><a class="home-title" href="#">Normal title.</a></h2>
        <p class="home-author">by Author on 1/1/2001</p>
      </div>
    </div>
  </div>

  <div class="col-md-4 col-sm-6 col-xs-12 no-margin">
    <div class="layerit">
      <div class="intro">
        <h2 id="title-text"><a class="home-title" href="#">Normal title..</a></h2>
        <p class="home-author">by Author on 1/1/2001</p>
      </div>
    </div>
  </div>

</div>

​

注意，第一列中文本的第一个字母是从列中提取出来的，这是因为.row使用了负值的左/右边距。

Answer 2

您可以使用CSS的text-overflow: ellipsis属性。这将保持截断您的文本，如果它超过100%的宽度。但这只会让你的文字保持一行，就像这样：

#title-text {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  padding: 0 30px;
}

请看下面的示例片段：

​

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.posts-not-found {
  border: 2px solid red;
  padding: 20px;
  left: 65px;
  right: 65px;
}
.layerit {
  width: 100%;
  height: 100%;
  padding-top: 150px;
  margin: 0 auto;
  background: rgba(0, 0, 0, .3);
  padding-top: 150px;
  position: relative;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  transition: background-color .9s ease;
  border: 1px solid white;
}
.navbar a {
  padding-top: 30px;
}
.navbar-brand {
  font-size: 25px;
}
.home-title {
  color: white;
}
#title-text {}
.home-author {
  color: white;
  padding-top: 20px;
  padding-bottom: 20px;
}
.no-margin {
  padding: 0;
  margin: 0;
}

#title-text {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  padding: 0 30px;
}

<div class="row">
  <div class="posts-not-found">
      <h1>Nothing Found</h1>
          <p>It seems we can’t find what you’re looking for. Perhaps searching can help.</p>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-12 no-margin">
      <div class="layerit">
          <h2 id="title-text" ><a class="home-title" href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, repellat possimus fuga autem at delectus deleniti eaque repudiandae qui mollitia, voluptatibus, a voluptates illum libero est ab facere obcaecati atque?</a></h2>
              <p class="home-author">by Author</p>
      </div>
  </div><!-- /.blog-post -->
  
    <div class="col-md-4 col-sm-6 col-xs-12 no-margin">
      <div class="layerit">
          <h2 id="title-text" ><a class="home-title" href="">Title</a></h2>
              <p class="home-author">by Author</p>
      </div>
  </div><!-- /.blog-post -->
    <div class="col-md-4 col-sm-6 col-xs-12 no-margin">
      <div class="layerit">
          <h2 id="title-text" ><a class="home-title" href="">Title</a></h2>
              <p class="home-author">by Author</p>
      </div>
  </div><!-- /.blog-post -->  <div class="col-md-4 col-sm-6 col-xs-12 no-margin">
      <div class="layerit">
          <h2 id="title-text" ><a class="home-title" href="">Title</a></h2>
              <p class="home-author">by Author</p>
      </div>
  </div><!-- /.blog-post -->
    <div class="col-md-4 col-sm-6 col-xs-12 no-margin">
      <div class="layerit">
          <h2 id="title-text" ><a class="home-title" href="">Title</a></h2>
              <p class="home-author">by Author</p>
      </div>
  </div><!-- /.blog-post -->

</div>
   <nav>
     <ul class="pager">
       <li>Older Posts</li>
       <li>Newer Posts</li>
       <li>No Newer/Older posts</li>
    </ul>
  </nav>

 <div class="row before-footer-area">
    <hr class="hidden-xs hidden-sm">
    <div class="col-md-4 hidden-xs hidden-sm">
    </div>
    <div class="col-md-4 hidden-xs hidden-sm">
    </div>
    <div class="col-md-4 hidden-xs hidden-sm">
    </div>
 </div>


<div class="row">
  <div class="col-md-12">
  </div>
</div>

​

希望这能有所帮助！