如何在使用溢出时跳过部分显示的图像：隐藏？

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/