3行以上のコンテンツに省略記号を追加する

Question

私はtumblrテーマを作成しています。写真投稿にカーソルを合わせると、説明が表示されます（下の例の説明を参照）。

デザイナーは、説明の最初の3行が、3行をオーバーした場合、説明の後に楕円を表示して配置したいだけです。

文字数が十分ではないことを考慮して、これについての最善の方法は何ですか？助けのための

おかげで...

http://brendan-rice.tumblr.com/

例写真ポスト

<div class="description photo" style="background-color: rgb(82, 69, 99);"> 
    <div style=""> 
     <input type="hidden" value="22186233340" class="id"> 
     <span class="title" style=""> 
     <p style=""> 
      <a href="http://staff.tumblr.com/post/21806558913/attention-west-coast-check-out-our-official" class="tumblr_blog" style="">staff</a>: 
     </p> 
     <blockquote style=""> 
      <p style=""> 
       <strong style="">Attention West Coast:</strong> Check out our <a href="http://www.tumblr.com/meetup/10107" style="">official Tumblr meetup</a> in Los Angeles on Tuesday 5/1! RSVP <a href="http://www.tumblr.com/meetup/10107" style="">here</a>. 
      </p> 
     </blockquote> 
     <p style=""> 
      (Source: <a title="meetups" href="http://meetups.tumblr.com/post/21804989817/were-gonna-be-in-la-tuesday-night-come-grab-a" style="">meetups</a>) 
     </p> 
     </span> 
     <div class="actions" style=""> 
      <span style="float: left;"> 
      <a target="_blank" href="http://www.tumblr.com/follow/penguinenglishlibrary " class="follow" style=""> 
      Follow </a> 
      </span> 
      <span style="float: right;"> 
      <a target="_blank" href="http://www.tumblr.com/reblog/22186233340/Pw5OgVj1" class="reblog" style=""> 
      Reblog </a> 
      </span> 
      <span style="float: right;"> 
      <a target="_blank" href="http://www.tumblr.com/reblog/22186233340/Pw5OgVj1" class="like" style=""> 
      Like </a> 
      </span> 
     </div> 
    </div> 
</div> 

Answer 1

編集：私はそれが三行し、省略記号に折り返すようにする方法はありません知っている限り、あなたの問題（jQueryプラグイン）

を解決する必要がありhttp://dotdotdot.frebsite.nl/：ちょうどこれを見つけました。

あなただけの1行、使用後の省略記号たい場合は：それは100％完璧ではないでしょうが、

.class{ 
    width:200px; 
    text-overflow:ellipsis; 
    white-space:nowrap; 
    overflow:hidden; 
} 

は、しかし、あなたはそれをエミュレートするために、いくつかのトリッキーなCSSを行うことができます。私はエミュレーションでjsfiddleを添付しました：http://jsfiddle.net/ET3F8/

本質的に、3行にラップして隠れてしまいます。コンテナの右下に位置する省略記号のテキスト（ "..."）を含む要素があります。それはテキストをカバーし、省略記号をエミュレートします。

問題： - 常に表示されます。テキストがオーバーフローしていない場合は、JSを使用して非表示にすることができます。 - 手紙を壊すことがあります。

とにかく、ちょっとしたアイデア！

Answer 2

だけtext-overflow: ellipsisを使用しますが、あなたはそれはあなたが何であれの幅を修正する必要がありますコンテンツを制限したい次のようなもの：

.myClass 
{ 
    width: 200px; 
    text-overflow: ellipsis; 
} 

Answer 3

このCSSはお客様のニーズを満たしていますか？

text-overflow: ellipsis; 

Answer 4

あなたは特定の高さに縛られていますが、私のトリックです。

.description .title { 
height: 3.7em; 
overflow: hidden; 
}