是否有任何Javascript庫智能地截斷字符串？

我需要在側面菜單中截斷字符串以使它們適合div而不會換行。該div有一個固定的寬度。我正在尋找一個圖書館來爲我做這件事。如果字符串是太長入格，它應該被截斷這樣的：是否有任何Javascript庫智能地截斷字符串？

<div>This string is too long</div> ==><div>This string is...ong</div>

正如你看到的，字符串不僅是省略號，但最後被截斷三個字母也是可見的。這是爲了提高可讀性。截斷不應該關心空間。

有誰知道，包括這樣的功能庫的？我們主要在整個項目中使用jQuery。

在此先感謝！

來源

2012-11-15 j0ker

CSS有'溢出：elipsis'。 – zzzzBov

我不知道庫本身就是這樣做的，但使用HTML5 Canvas和Canvas text metrics，您可以確定該字符串是否適合，如果不是，則需要裁剪多少。

var canvas = document.createElement('canvas'); 
var context = canvas.getContext('2d'); 
context.font = '12pt Arial'; 
var metrics = context.measureText('measure me!'); 
var width=metrics.width;

來源

2012-11-15 11:11:42 dda

我甚至都沒有想過這件事。看起來有點哈克，但像魅力一樣。謝謝！ – j0ker

是的。我之前就已經完成了，實際上它工作得很好...... :-) – dda

我曾經使用過jQuery.dotdotdot。

考慮您的HTML作爲

<div class="longtext">This string is too long</div>

使用dotdotdot

$(document).ready(function() { 
    $(".longtext").dotdotdot(); 
});

訪問他們的網站更多的配置選項後，只需使用該JavaScript。

來源

2012-11-15 11:16:48

看起來不錯。但是，如果帶有超長文本的div沒有顯示在document.ready中，似乎這個庫不起作用。既然是這樣，那對我不起作用。 – j0ker

@ j0ker - 不，但你會打電話給.dotdotdot（）;在您加載文本後。 – Eddie

This JSFiddle給出了一個簡單的解決方案：

/** 
* Uses canvas.measureText to compute and return the width of the given text of given font. 
* 
* @param text The text to be rendered. 
* @param {String=} fontStyle The style of the font (e.g. "bold 12pt verdana"). 
* @param {Element=} canvas An optional canvas element to improve performance. If not given, the function will create a new temporary canvas element. 
* 
* @see http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393 
*/ 
function getTextWidth(text, fontStyle, canvas) { 
    // if given, use cached canvas for better performance 
    // else, create new canvas 
    canvas = canvas || document.createElement("canvas"); 
    var context = canvas.getContext("2d"); 
    context.font = fontStyle; 
    var metrics = context.measureText(text); 
    return metrics.width; 
} 


/** 
* Returns text whose display width does not exceed the given maxWidth. 
* If the given text is too wide, it will be truncated so that text + ellipsis 
* is still less than maxWidth wide. 
* 
* @param text The text to be truncated. 
* @param {String} fontStyle The font style that the string is to be rendered with. 
* @param maxWidth Max display width of string. 
* @param {String=} ellipsis Set to "..." by default. 
* @param {Element=} canvas Optional canvas object to improve performance. 
* 
*/ 
function truncateText(text, fontStyle, maxWidth, ellipsis, canvas) { 
    var width; 
    var len = text.length; 
    ellipsis = ellipsis || "..."; 
    while ((width = getTextWidth(text, fontStyle, canvas)) > maxWidth) { 
     --len; 
     text = text.substring(0, len) + ellipsis; 
    } 
    return text; 
}

的例子：

var maxWidth = 200; 
var fontStyle = "bold 12pt arial"; 
var text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."; 
var truncatedText = truncateText(text, fontStyle, maxWidth) 
console.log(truncatedText);

生成：「Lorem存有悲坐了......」

來源

2014-01-09 09:43:16 Domi

是否有任何Javascript庫智能地截斷字符串？

回答

相關問題