css - 使用溢出: hidden?时如何跳过部分显示的图像

Question

我正在尝试做一个“阅读更多”的功能。
我使用 overflow: hidden 来隐藏比 div 大的内容。
结果现在看起来像:
我想跳过部分显示的图像。
像这样:
反图时，跳过整张图。
然后单击“阅读更多”按钮后，将显示所有内容。我该怎么做？

我的代码:

.post {
  width: 800px;
  height: 300px;
  overflow: hidden;
  background-color: #F6F8FA;
  border-style: ridge;
  border-width: 2px;
  border-color: #F6F8FA;
  padding: 15px;
  margin-bottom: 30px;
  margin-left: 5px;
  margin-top: 30px;
}

.published-date {
  float: right;
}

<div class="post">
  <p class="published-date">published: Aug. 29, 2017, 12:19 p.m.</p>
  <h1>
    <a href="{% url 'post_detail' pk=post.pk %}">
      <!--post.title-->
      <u>[Django] 預設登入admin</u>
    </a>
  </h1>
  <p>
    <!--post.text-->
    <p>在Django中，想要新增一個post，但卻還沒登入到admin時，或是admin中沒有你的帳號密碼時，你可能會得到瀏覽器回應這樣的錯誤： </p>
    <p><img alt="" src="http://i.imgur.com/4cJUlK7.png?3" />
      <br></p>
    <p>手動登入admin（localhost:8000/admin）可能可以解決這個問題： </p>
    <p><img alt="" src="http://i.imgur.com/Xfbghkx.png" />
      <br><br></p>
    <p>這時候如果能夠每次都自動登入，就會方便很多。<br /> 而Django在 <code>django.contrib.auth</code> 也提供了<a href="https://docs.djangoproject.com/en/1.11/topics/auth/default/">一些方法</a><br /> 以下條件預設登入的user只會有一個（就是我）
      <br />
      <br> 新增一個 <code>user.py</code> </p>
    <div class="codehilite">
      <pre><span></span><span class="k">class</span> <span class="nc">UserInfo</span><span class="p">():</span>
    <span class="n">username</span> <span class="o">=</span> <span class="p">{</span><span class="n">enter</span> <span class="n">your</span> <span class="n">username</span><span class="p">}</span>
    <span class="n">password</span> <span class="o">=</span> <span class="p">{</span><span class="n">enter</span> <span class="n">your</span> <span class="n">password</span><span class="p">}</span>
</pre>
    </div>


    <p><br> 在 <code>views.py</code> 中，import <code>authenticate</code> , <code>login</code> 。記得也要將自己的user資訊加進來：</p>
    <div class="codehilite">
      <pre><span></span><span class="kn">from</span> <span class="nn">django.contrib.auth</span> <span class="kn">import</span> <span class="n">authenticate</span><span class="p">,</span> <span class="n">login</span>
<span class="kn">from</span> <span class="nn">.user</span> <span class="kn">import</span> <span class="n">UserInfo</span>
<span class="k">def</span> <span class="nf">post_list</span><span class="p">(</span><span class="n">request</span><span class="p">):</span>
    <span class="n">user</span> <span class="o">=</span> <span class="n">authenticate</span><span class="p">(</span><span class="n">username</span> <span class="o">=</span> <span class="n">UserInfo</span><span class="o">.</span><span class="n">username</span><span class="p">,</span> <span class="n">password</span> <span class="o">=</span> <span class="n">UserInfo</span><span class="o">.</span><span class="n">password</span><span class="p">)</span>
    <span class="n">login</span><span class="p">(</span><span class="n">request</span><span class="p">,</span> <span class="n">user</span><span class="p">)</span>

    <span class="p">{</span><span class="o">...</span><span class="n">your</span> <span class="n">code</span><span class="p">}</span>  
</pre>
    </div>


    <p><br> 在程式執行到 <code>post_list()</code> 的時候就會自動登入，屢試不爽。</p>
    <p><br><br> 這樣的寫法把user的帳密分開成一個檔案寫，若要提交到遠端repo，可以直接略過（.gitignore）含有user資訊的檔案，以免公開。
    </p>
  </p>
  <a href="/post/32/"></p>
    <a href="{% url 'post_detail' pk=post.pk %}">
      <button type="button" class="show-more-btn">more...</button>
    </a>
    <!--end post.text-->
</div>

post.title 和post.text 是标题和正文内容。

Answer 1

您可以使用 jquery 函数执行此操作。

$('.show-more-btn').click(function(){
    $('.post').animate({height:'100%'}, 500);
});

基本上，一旦您点击“更多...”按钮，您就会将 height:100% 添加到 .post

请参阅下面的示例。

https://jsfiddle.net/st6ys7tt/9/