將橢圓添加到溢出3行的內容

我正在創建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>

來源

2012-05-01 Burt

你實際上想要省略號的哪個元素？ – mattytommo

理想情況下，我想在span.title – Burt

上工作所以身體中的一切都是？包含啓動「Attention West Coast ...」文本的項目？ – mattytommo

編輯：剛剛發現這一點：http://dotdotdot.frebsite.nl/這應該解決您的問題（jQuery插件）

據我知道有沒有辦法讓它換到三線，然後省略號。

如果你只是想在省略號後1號線，用途：

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

但是，你可以做一些棘手的CSS來模仿它，但它不會是完美的100％。我附加了一個jsfiddle與仿真：http://jsfiddle.net/ET3F8/

本質上，它包裝到3行，然後成爲隱藏。有一個元素包含位於容器右下角的省略號文本（「...」）。它將覆蓋文本並模擬省略號。

問題： - 它會一直顯示。如果文本沒有溢出，你也許可以使用一些JS來隱藏它。 - 它有時會打破一封信。

無論如何，只是一個想法！

來源

2012-05-03 23:55:47

來自dotdotdot我自己，它工作完美，感謝您的幫助 – Burt

只需使用text-overflow: ellipsis，但你需要修復的寬度不管它是你想限制內容。例如：

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

來源

2012-05-01 12:06:34 mattytommo

我已經試過了，它似乎並不爲work.Thanks我已經試過了答案 – Burt

此CSS是否符合您的需求？

text-overflow: ellipsis;

來源

2012-05-01 12:06:34 Marc

確實，它似乎並沒有工作。感謝您的回答 – Burt

這不適用於多行 – JackAce

你必然會遇到一個特定的高度，但對我來說確實有竅門。

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

來源

2012-05-03 23:10:41 Barbara

將橢圓添加到溢出3行的內容

回答

相關問題