jQuery.ellipsisWidth

jQuery plugin for dynamic ellipsis effect (not used css), and stringWidth. (bonus)

Browser support

IE 9 <= *

Usage

HTML source

<div style="width:100px;">ABCDEFGHIJKPQRSTUVWXYZ</div>

Script source

$("div").ellipsisWidth();
// |----100px---|
// ABCDEFGHIJ...

options

width

$("div").ellipsisWidth(50);
//or
$("div").ellipsisWidth({
    width:50
});
// |-50px-|
// ABCD...

newText

$("div").ellipsisWidth({
    newText:"AAAAAAAAAAAAAAAAAAAA"
});
// AAAAAAAAAA...

replace

$("div").ellipsisWidth({
    replace:"***" // default "..."
});
// ABCDEFGHIJ***

useHtml

$("div").ellipsisWidth({
    replace:"<span>...</span>",
    useHtml:true //default false
});
// ABCDEFGHIJ<span>...</span>
// (no escape..)

replaceWidth

$("div").ellipsisWidth({
    replace: "",
    replaceWidth: 30
});
// |--70px--|-30px-|
// ABCDEFGHI

position

$("div").ellipsisWidth({
    position:"middle" // "front"|"middle"|"after"|Number, default "after"
});
// ABCD...WXYZ

$("div").ellipsisWidth({
    position:"front"
});
// ...RSTUVWXYZ

$("div").ellipsisWidth({
    position:3
});
// ABC...UVWXYZ

$("div").ellipsisWidth({
    position:-2
});
// ABCDEFG...YZ

path

<div style="width:100px;">C:/INNOMFT/webapp/boot/app/dispatchTransfer/test.zip</div>
<div style="width:100px;">C:/INNOMFT/webapp/boot/app/dispatchTransfer/test12345aaav22.zip</div>

$("div").ellipsisWidth({
    path: true, //default false
    position:"after"
});
// C:/IN.../test.zip
// /test1234...zip

path mode is firstly filename

pathSeparator

<div style="width:100px;">C:\INNOMFT\webapp\boot\app\dispatchTransfer\test.zip</div>

$("div").ellipsisWidth({
    path: true,
    pathSeparator: "\\" //default "/"
});
// C:\IN...\test.zip

rerenderOnResize

$("div").ellipsisWidth({
    rerenderOnResize: true, //default false
});

rerender on browser resize.

can be mixed

$("div").ellipsisWidth({
    width: 130,
    replace:'<img src="/ellips.gif" width="20">',
    useHtml:true,
    replaceWidth: 20,
    position: "middle"
});

warning

$("<span>ABCDEFGHIJKPQRSTUVWXYZ</span>").ellipsisWidth(100);
// result: ???

it`s not working. render styles is not known on detached.

bonus) stringWidth

$("span").stringWidth("test");
// 15px, no render.
$("span").text("test").width();
// 15px, get after rendered

but, recommend is..

div{
    width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
 }

used css. css is better... -_-*