2

改行なしで div に収まるように、サイド メニューの文字列を切り詰める必要があります。div の幅は固定です。私はそれを行うためのライブラリを探しています。文字列が長すぎて div に収まらない場合は、次のように切り詰める必要があります。

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

ご覧のとおり、文字列は省略記号で切り捨てられているだけでなく、最後の 3 文字も表示されています。これは、可読性を高めることを目的としています。切り捨てはスペースを気にするべきではありません。

そのような機能を含むライブラリを知っている人はいますか? プロジェクト全体で主に jQuery を使用しています。

前もって感謝します！

4

3 に答える 3

2

それを行うライブラリ自体はわかりませんが、HTML5 CanvasおよびCanvasテキストメトリックを使用して、文字列が収まるかどうか、収まらない場合はどれだけ切り取る必要があるかを判断できます。

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-15T11:11:42.947 に答える
2

jQuery.dotdotdotを使用したことがあります。

あなたのhtmlを次のように考えてください

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

dotdotdotを使用した後、このjavascriptを使用してください

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

より構成可能なオプションについては、彼らのWebサイトにアクセスしてください。

于 2012-11-15T11:16:48.327 に答える
1

この 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 ipsum dolor sit a..."

于 2014-01-09T09:43:16.673 に答える