將html文本適當地截短爲一個固定大小的區域

在生成的html頁面中，我們有一個固定的大小區域（可以說是200 x 300），我們需要在其中儘可能多地放入文本（如文本的常規段落），如果不適合，請刪除適當數量的字符，並在末尾添加「...」。將html文本適當地截短爲一個固定大小的區域

該文本不是固定大小的字體，儘管我們在本文中使用了一種特定字體，但「通用」解決方案顯然是首選。

這看起來有趣，但我想這將是非常緩慢的具有這種功能被稱爲對頁面上的幾個項目 - http://bytes.com/topic/javascript/answers/93847-neatly-truncating-text-fit-physical-dimension

該解決方案可以使用HTML的混雜，CSS，JS和php如所須。

關於方法的建議比歡迎！

來源

2010-09-10 tzmatt7447

通過CSS及其溢出設置元素尺寸爲「隱藏」。

然後，找出具有這種功能，當元素內容溢出（via）：現在

// Determines if the passed element is overflowing its bounds, 
// either vertically or horizontally. 
// Will temporarily modify the "overflow" style to detect this 
// if necessary. 
function checkOverflow(el) 
{ 
    var curOverflow = el.style.overflow; 
    if (!curOverflow || curOverflow === "visible") 
     el.style.overflow = "hidden"; 

    var isOverflowing = el.clientWidth < el.scrollWidth 
     || el.clientHeight < el.scrollHeight; 

    el.style.overflow = curOverflow; 

    return isOverflowing; 
}

，在一個循環中刪除的文字和檢查，直到它不溢出了。追加一個省略號字符（String.fromCharCode(8230)）到最後，但只限於溢出。

爲了避免在該操作過程中出現任何閃爍效果，您可以嘗試處理該元素的隱藏副本，但我不確定瀏覽器是否對不可見的元素進行了必要的佈局計算。（誰能說清楚嗎？）

來源

2010-09-10 12:16:02 Tomalak

等一下......這是個問題！更好地鏈接到實際問題http://stackoverflow.com/questions/143815 – 2010-09-10 12:21:14

@Yi：感謝您的交叉鏈接。 :-) – Tomalak 2010-09-10 12:22:29

:(:(（ - 沒有一個'優雅'的方式做這個...？不介意做一些數學來找出什麼可以工作... – tzmatt7447 2010-09-10 12:41:38

我想說你找到的解決方案是最好的。例如，它用於這個jQuery plugin，它可以在輸入文本時自動地對textareas進行自動增大。我把這個概念，並重寫了它與jQuery這個簡單的測試，在這裏：http://jsfiddle.net/ZDr5K/

var para = $('#para'); 
var height = 200; 

while(para.height() >= height){ 
    var text = para.text(); 

    para.text(text.substring(0, text.length - 4) + '...'); 
}

可能的改進將包括右修整和拆除期間，如果最後一個字符是一個句號。逐字逐句刪除也會更易讀/略快。

至於多次運行的功能，這是不可避免的。在這裏你唯一能做的事情就是使用:after來追加橢圓，但即便如此，交叉兼容性問題也應該避免。

來源

2010-09-10 12:24:00

將html文本適當地截短爲一個固定大小的區域

回答

相關問題