आपके कोड के साथ कुछ समस्याएं हैं।
/ 5
क्यों? वर्णों की चौड़ाई font-family
और font-size
पर निर्भर करती है।
- आप abbr title में
str
पलायन करना होगा (या किसी एक "कोड अमान्य कर देगा)।
diff
घोषित नहीं किया गया है और वैश्विक क्षेत्र
substring
इस तरह काम करने वाला नहीं है में समाप्त होता है। आप किस ब्राउज़र का उपयोग कर रहे हैं?
hidden
style.display
की कोई मान्य मान नहीं है। इसे छिपाने के लिए आप मूल्य none
का उपयोग करना चाहिए, लेकिन फिर ब्राउज़र offsetWidth
गणना नहीं है। बजाय style.visibility="hidden"
का प्रयोग करें।
- सही के लिए खोज लंबाई ver है वाई अक्षम
- बच चाहिए
</abbr>
"
मैं इसे आप के लिए दुबारा लिखा और className
जोड़ा ताकि आप स्थापित करने के लिए एक शैली का उपयोग कर सकते font-family
और font-size
। श्री Fooz सुझाव दिया है कि आप पूरी स्ट्रिंग को दिखाने के लिए माउसओवर का उपयोग करें। यही कारण है जबकि एक छोटे से अधिक परीक्षण मैं कीड़े की एक जोड़ी पाया: नहीं के बाद से आवश्यक आधुनिक ब्राउज़रों उसके लिए आपको
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;
}
संपादित करें (एफएफ, IE, ओपेरा और क्रोम के साथ परीक्षण) से करते हैं।
मैं बजाय Math.ceil
इस्तेमाल किया इरादा Math.floor
(मैं पर इस दोष है कि अंग्रेजी मेरी देशी भाषा नहीं है)
तो इनपुट स्ट्रिंग एचटीएमएल टैग था तो परिणाम होगा अपरिभाषित जा (यह मध्य में किसी टैग को काटना या खुले टैग को छोड़ने के लिए अच्छा नहीं है)
सुधार:
- सभी स्थानों पर अवधि में कॉपी की गई स्ट्रिंग से बचें। तुम अब भी html-संस्थाओं का उपयोग कर सकते हैं, लेकिन कोई टैग की अनुमति है (
<
और >
प्रदर्शित किया जाएगा)
- दुबारा लिखा
while
-statement (यह एक थोड़ा तेजी से होता है, लेकिन मुख्य कारण बग से छुटकारा पाने के लिए किया गया था कि वजह से अतिरिक्त दौर और अलग होने के बयान से छुटकारा पाने के लिए )
- को
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;
}
बहुत अच्छा, धन्यवाद।/5 को मेरे आवेदन में नजरअंदाज करने के आधार पर चुना गया था (एम 10 पीएक्स है, एफ 3 पीएक्स है)। यह वास्तव में बकवास का प्रकार है क्योंकि स्ट्रिंग को रखा जाएगा कि div के स्टाइल के आधार पर फ़ॉन्ट का आकार बदल जाएगा, इसलिए आदर्श रूप से हम शरीर में शामिल नहीं होंगे, लेकिन उस div के लिए। – Aeon
भागने: अच्छा बिंदु! उसे पकड़ नहीं लिया ... – Aeon
सबस्ट्रिंग: गाह, मुझे लगता है कि एक टाइपो था, रेंज स्टार्ट ऑपरेटर भूल गया। – Aeon