Question

我尝试编写一个wordpress主题，但是当我使用较长的帖子标题时，文字正在执行此操作：http://prnt.sc/b3pky4

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

我使用以下代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

如何修复Wordpress模板中的返回

1 个答案: