2010-12-15 38 views
2

嘿,大家好,我一直在尋找這個解決方案,但只找到限制字符的解決方案。我有以下代碼:jquery限制行中的段落,並應用三個階段到最後

<div id = "ta_0" style="display: none;"> 
    <a href = "news.html">IRS announces 2011 COLA limits for qualified retirement plans</a> 
    <br />Most retirement plan contribution and benefit limits for 2011 will 
be unchanged from 2010, the IRS has announced. The 2011 cost of 
living adjustments (COLAs), as applied by their Internal Revenue 
C...</div> 

我想限制錨文本後兩行文字後的字符數量。我知道我可以限制字符數限制,但可能會將字數減半。相反,我只是想讓他們停下來。我還想在限制末尾附加「...」。

有什麼建議嗎?

+1

可能重複[跨瀏覽器多行文本溢出與省略號附加寬度和高度固定div?](http://stackoverflow.com/questions/3404508/cross-browsers-mult-lines-text-overflow-with -ellipsis-added-within-a-widthhe) – kapa 2011-12-09 07:32:59

回答

0

爲了做到這一點,您需要計算每行的文本寬度,特別是在使用比例寬度字體的情況下。

我建議在看看這個問題:Calculate text width with JavaScript

這問題與如何執行文本度量操作問題的交易。我會在建築中使用它,每次在句子中增加一個單詞,當超過限制時,開始一條新線路,並在達到足夠的線路時停止。

2

「兩條線」幾乎是不可能的。這需要兩件事:

  1. Thumbscrews控制寬度和字體大小的每個方面 - 即使使用它,你仍然無法控制渲染到100%。這是困難的部分。
  2. 關於寬文本渲染的知識。不同數量的字符可以放入兩行。這是不可能的部分。

你可以做的是包裹在一個塊級元素的描述性文字(即<div>),並使其通過CSS高兩行:

div.description { 
    line-height: 1.2em; 
    height: 1.4em; /* max-height would be nicer but is not supported everywhere */ 
    overflow: hidden; 
} 

IE支持方便text-overflow: ellipsis;屬性,當文本溢出時,給你很好的自動省略號,其他瀏覽器不會。

+0

真的,我可以在CSS中完成,只是不知道是否可以用jQuery。感謝您的幫助Tomalak – 2010-12-15 17:46:03

+2

@JJ Nold:http://stackoverflow.com/questions/536814/javascript-insert-ellipsis-into-html-tag-if-content-too-wide http://stackoverflow.com/questions/3404508 /交叉瀏覽器-MULT線文本溢出與 - 省略號-所附中之-widthhei – Tomalak 2010-12-15 17:49:59