我如何避免这个标题溢出？

Question

只是通过创建一个免费的 wordpress 主题来玩耍，但我被困住了，因为 post 的标题似乎在它很长的时候溢出了。

请问我该如何解决这个问题。

这是显示错误的图片。

红色边框是向下推下方容器的边框。

感谢您的帮助。

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

您可以使用 text-overflow: ellipsis 属性个 CSS。如果超出 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>

希望对您有所帮助！

Answer 2

您的灰色区域由顶部填充创建，space 标题和作者文本占据。当标题或作者的文本超过一行时，灰色区域会扩大。

您可以：

使用省略号缩短标题，使用 CSS text-overflow: ellipsis; 或 WordPress wp_trim_words。
允许文本向上移动并占据灰色区域顶部的更多灰色space。文本标题将共享基线但不共享顶行。

这是选项 #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 使用负 left/right 边距。

我如何避免这个标题溢出？

how do i avoid this title from overflowing?

css

themes

wordpress-theming

CSS

HTML