JavaScript supports line wrapping of page text_javascript skills-JS Tutorial-php.cn

JavaScript supports line wrapping of page text_javascript skills

WBOY

Release： 2016-05-16 18:51:32

Original

1717 people have browsed it

I encountered a problem, that is, when the page is displayed, in many cases it is necessary to wrap the displayed text, for example, the text exceeds the width of TD, or the width of DIV, etc.
There is word-break and so on under IE, but it does not work under FF, so I did some research and wrote a JS script. The principle is as follows:
1. First, we put it on the page Find a span element, use it to load characters, and then use its width to get the display width of the character
2. Then, when we display a string, we can use the character width obtained previously to calculate The width of each string
3. On this basis, it is not a problem to calculate the position where the string should be broken, and insert
to break the line.
Due to limited conditions, blog cannot upload attachments. I will explain the code here.
The code has two parts, one is "textWidth.js", which does most of the work; the other is the test page.
1. textWidth.js

Source code

Description

var TextWidth = new function() { 
var widthLib = new Hash(); 
var textSpan; 
var self = this;

Copy after login

源代码	说明
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; } Copy after login	内部成员变量 widthLib是一个保存某个字体、字号的所有字符的宽度的hash表；
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; } Copy after login	计算字符串的长度。算法简单，就是把每个字符的宽度都加到一起就好了。关键是getSizeLib(fontName, fontSize);这个函数，如果Hash表里没有这个字体字号的宽度数据，它会主动初始化相应的宽度数据
self.setSpan = function(obj) { textSpan = obj; textSpan.hide(); } Copy after login	计算折行。这个也简单，先从Hash表里拿到宽度数据，然后逐个计算，宽度超了，就加个进去
function getSizeLib(fontName, fontSize) { if (!widthLib.get(getKey(fontName, fontSize))) { initwidthLib(fontName, fontSize); } return widthLib.get(getKey(fontName, fontSize)); } Copy after login	保存用于宽度计算的span元素
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("中中中中中中中中中中"); sizeLib[256] = textSpan.offsetWidth/10; for(var i = 0; i<256; i++) { textSpan.update("中" + String.fromCharCode(i)+"中"); sizeLib[i] = textSpan.offsetWidth-2*sizeLib[256]; } textSpan.hide(); widthLib.set(key, sizeLib); } Copy after login	取得指定字体字号的宽度数据。没有的话，就初始化一份
function getKey(fontName, fontSize) { return fontName+"@"+fontSize+"px"; } } Copy after login	初始化

Internal member variables

widthLib is a hash table that saves the width of all characters in a certain font and font size;

Calculate the length of the string. The algorithm is simple, just add the width of each character together. The key is getSizeLib(fontName, fontSize); this function, if there is no width data for this font size in the Hash table, it will actively initialize the corresponding width data

Calculates line breaks. This is also simple. First get the width data from the Hash table, and then calculate it one by one. If the width exceeds, add
in

Save the span element used for width calculation

Gets the width data of the specified font size. If not, initialize one

Initialization

transitional.dtd"> < ;html xmlns="http://www.w3.org/1999/xhtml">

Untitled Document

< textarea id="in" type="text">

<br>