html - 如何修复 Wordpress 模板中的返回

Question

我尝试编写一个 wordpress 主题，但是当我使用更长的帖子标题时，文本是这样的:http://prnt.sc/b3pky4

我该如何解决这个问题？在这个例子中，它看起来不错，但当我缩小它时，它看起来很糟糕。怎么了？

我正在使用以下代码:

#thumbnail {
  float: left;
  margin-right: 20px;
}
#post {
  margin-top: 50px;
}

<article id="post">

  <div id="thumbnail">

    <img width="150" height="150" src="http://localhost/wp-content/uploads/M-Jiasmin-LeMeridien-0369-FINAL-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="M - Jiasmin LeMeridien 0369 FINAL" />
  </div>

  <h2><a href="http://localhost/2016/05/12/beitrag-6-the-last/">This is an example of a really really really long post title</a></h2>

  <div class="entry">

    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, … <a href="http://localhost/2016/05/12/beitrag-6-the-last/">Weiterlesen</a>
    </p>

  </div>

</article>

Answer 1

取决于您要如何修复它。我的建议是截断并使用省略号来缩短标题:

h2 a {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Here's an example