テキストはボトムのパディングを無視し、次の行を描画します。

Question

私のポストページは自分のことを気にしていて、必要な作業を拒否したようです。

最大高さが6行+パディングに設定されているにもかかわらず、ボックス（div）内に保存されたテキスト（スパン）は次の行を描画します。ここに見られるように

：

  <div class = "post"> 
       <div class = "post-title">Lorem ipsum dolor amet</div> 
       <div class = "post-content"><span>Lorem Ipsum</span></div> 
       <div class = "post-footer"><span class = "post-date">2017.02.07</span><span class = "post-author">- J.</span></div> 
      </div> 

とCSS：

.post-content 
{ 
    max-height: 128px; 
    overflow: hidden; 
    color: rgb(81, 85, 88); 
} 

.post-content span 
{ 
    overflow: hidden; 
    font-size: 15px; 
    display: inline-block; 
    padding: 10px 0px; 
} 

だから、明らかに私はそれにすべてのソリューションを持っていない、ここでのコードですhttps://jsfiddle.net/2rm969es/

Answer 1

明示的な行の高さは、私のために働くように思わ設定：

http://codepen.io/anon/pen/dNjxRW

line-height: 20px; 

はあなたにもフッターの上に表示されるパディングの10pxのを持ってしようとしていますか？

Answer 2

今後この問題を抱えている、または今後そうなる他の人には - フッターとタイトルに余白を付けると、あなたが望むように整頓されませんが、迷惑にならないでしょう「テキストを引く」事。