コードにはいくつかの問題があります。
- なぜ
/ 5ですか？文字の幅は と によって異なりfont-familyますfont-size。
str略語のタイトルをエスケープする必要があります(エスケープしないと、" によってコードが無効になります)。diffは宣言されておらず、グローバル スコープで終了します- はその
substringように動作するはずがありません。どのブラウザを使用していますか?
hiddenの有効な値ではありませんstyle.display。それを非表示にするには、値を使用する必要がありますnoneが、ブラウザはoffsetWidth. style.visibility="hidden"代わりに使用してください。- 適切な長さの検索は非常に非効率的です。
- 逃げなければならない
</abbr>」
スタイルを使用してandclassNameを設定できるように、書き直して追加しました。Mr Fooz は、文字列全体を表示するためにマウスオーバーを使用することを提案しました。最新のブラウザはあなたのためにそれを行うので、それは必要ありません（FF、IE、Opera、およびChromeでテスト済み）font-familyfont-size
function fitStringToSize(str,len,className) {
var result = str; // set the result to the whole string as default
var span = document.createElement("span");
span.className=className; //Allow a classname to be set to get the right font-size.
span.style.visibility = 'hidden';
span.style.padding = '0px';
document.body.appendChild(span);
// check if the string don't fit
span.innerHTML = result;
if (span.offsetWidth > len) {
var posStart = 0, posMid, posEnd = str.length;
while (true) {
// Calculate the middle position
posMid = posStart + Math.ceil((posEnd - posStart) / 2);
// Break the loop if this is the last round
if (posMid==posEnd || posMid==posStart) break;
span.innerHTML = str.substring(0,posMid) + '…';
// Test if the width at the middle position is
// too wide (set new end) or too narrow (set new start).
if ( span.offsetWidth > len ) posEnd = posMid; else posStart=posMid;
}
//Escape
var title = str.replace("\"",""");
//Escape < and >
var body = str.substring(0,posStart).replace("<","<").replace(">",">");
result = '<abbr title="' + title + '">' + body + '…<\/abbr>';
}
document.body.removeChild(span);
return result;
}
編集：もう少しテスト中に、いくつかのバグが見つかりました。
改良点:
- すべての場所でスパンにコピーされた文字列をエスケープします。引き続き html エンティティを使用できますが、タグは使用できません (が表示さ
<れ>ます)。
- -ステートメントを書き直しました
while（少し高速ですが、主な理由は、余分なラウンドを引き起こしたバグを取り除き、breakステートメントを取り除くことでした）
- 関数の名前を に変更しました
fitStringToWidth
バージョン 2:
function fitStringToWidth(str,width,className) {
// str A string where html-entities are allowed but no tags.
// width The maximum allowed width in pixels
// className A CSS class name with the desired font-name and font-size. (optional)
// ----
// _escTag is a helper to escape 'less than' and 'greater than'
function _escTag(s){ return s.replace("<","<").replace(">",">");}
//Create a span element that will be used to get the width
var span = document.createElement("span");
//Allow a classname to be set to get the right font-size.
if (className) span.className=className;
span.style.display='inline';
span.style.visibility = 'hidden';
span.style.padding = '0px';
document.body.appendChild(span);
var result = _escTag(str); // default to the whole string
span.innerHTML = result;
// Check if the string will fit in the allowed width. NOTE: if the width
// can't be determined (offsetWidth==0) the whole string will be returned.
if (span.offsetWidth > width) {
var posStart = 0, posMid, posEnd = str.length, posLength;
// Calculate (posEnd - posStart) integer division by 2 and
// assign it to posLength. Repeat until posLength is zero.
while (posLength = (posEnd - posStart) >> 1) {
posMid = posStart + posLength;
//Get the string from the beginning up to posMid;
span.innerHTML = _escTag(str.substring(0,posMid)) + '…';
// Check if the current width is too wide (set new end)
// or too narrow (set new start)
if ( span.offsetWidth > width ) posEnd = posMid; else posStart=posMid;
}
result = '<abbr title="' +
str.replace("\"",""") + '">' +
_escTag(str.substring(0,posStart)) +
'…<\/abbr>';
}
document.body.removeChild(span);
return result;
}