Home > Developer > JavaScript
A problem occurs when a page is displayed. In many cases, the displayed text needs to be folded, for example, the text exceeds the width of TD or the width of DIV.
Word-break is available in IE, but it does not work in FF. So I studied it and wrote a JS script. The principle is as follows:
1. First, we will find a span element on the page, use it to load characters, and then use its width to get the display width of characters.
2. Then, when we display a string, we can calculate the width of each string using the character width obtained above.
3. On this basis, calculate the position where the string should be folded, and insert <br/> to fold the line.
When the conditions are limited, the blog cannot upload attachments. I will explain the code here.
The Code consists of two parts: "textWidth. js", which completes most of the work and test pages.
1. textWidth. js
| Source code | Description |
|---|---|
var TextWidth = new function() { var widthLib = new Hash(); var textSpan; var self = this; |
Internal member variables WidthLib is a hash table that stores the width of all characters in a font and font size; |
self.getWidth = function(string, fontName, fontSize) { var lib = getSizeLib(fontName, fontSize); var totalWidth = 0; for(var i =0; i < string.length; i++) { var c = string.charCodeAt(i); if (c > 255) { totalWidth += lib[256]; }else{ totalWidth += lib[c]; } } return totalWidth; } |
Calculates the length of a string. The algorithm is simple, that is, adding the width of each character together. The key is getSizeLib (fontName, fontSize). If the Hash table does not have the width data of the font size, it will actively initialize the corresponding width data. |
self.wrapText = function(string, fontName, fontSize, maxWidth) { if (!string) { return " "; } var origText = string.strip(); var lib = getSizeLib(fontName, fontSize); var resultText = ""; var deltaW; var totalW = 0; for(var i =0; i < string.length; i++) { var c = string.charCodeAt(i); if (c > 255) { deltaW = lib[256]; }else{ deltaW = lib[c]; } if ((totalW + deltaW) > maxWidth) { resultText += ""; totalW = deltaW; }else{ totalW += deltaW; } resultText += string.charAt(i); } return resultText; } |
Calculates the line. This is also simple. first obtain the width data from the Hash table, and then calculate the data one by one. If the width is too large, add a <br>. |
self.setSpan = function(obj) { textSpan = obj; textSpan.hide(); } |
Save the span Element Used for width Calculation |
function getSizeLib(fontName, fontSize) { if (!widthLib.get(getKey(fontName, fontSize))) { initwidthLib(fontName, fontSize); } return widthLib.get(getKey(fontName, fontSize)); } |
Obtains the width of the specified font size. If not, initialize a copy. |
Function initwidthLib (fontName, fontSize) {var key = getKey (fontName, fontSize); var sizeLib = new Array (257); textSpan. show (); textSpan. style. fontFamily = fontName; textSpan. style. fontSize = fontSize + "px"; textSpan. update ("Medium medium"); sizeLib [256] = textSpan. offsetWidth/10; for (var I = 0; I <256; I ++) {textSpan. update ("medium" + String. fromCharCode (I) + "medium"); sizeLib [I] = textSpan. offsetWidth-2 * sizeLib [256];} textSpan. hide (); widthLib. set (key, sizeLib );} |
Initialization |
function getKey(fontName, fontSize) { return fontName+"@"+fontSize+"px"; } } |
|
The code for the test page is as follows:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
Transitional. dtd ">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Script language = "javascript" src = "prototype. js"> </script>
<Script language = "javascript" src = "textWidth. js"> </script>
<Title> untitled document </title>
<Style type = "text/css">
*{
Font-size: 14px;
Font-family: Geneva, Arial, Helvetica, sans-serif;
}
</Style>
</Head>
<Body>
<Textarea id = "in" type = "text"> </textarea> <input type = "button" value = "test" onclick = "runTest () "/> <p/>
<Textarea id = "resultSpan" style = "width: 900px; font-size: 14px; font-family: Geneva">
</Textarea>
<Div id = "resultDisplay" style = "font-size: 14px; font-family: Geneva; background-color: # e242E6; width: 80px"> </div>
<Span id = "textSpan" style = "display: none"> </span>
</Body>
<Script type = "text/javascript">
TextWidth. setSpan ($ ('textsize '));
Function runTest (){
$ ('Resultwspan '). innerHTML = $ ("in"). value;
Var theWidth = TextWidth. getWidth ($ ('resulttang'). innerHTML, "Geneva", 14 );
$ ("ResultDisplay"). innerHTML = TextWidth. wrapText ($ ('resultwspans '). innerHTML, "Geneva", 14, 80 );
}
</Script>
</Html>
Download and verify prototype. js
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
