문제가 발생했습니다. 즉, 페이지가 표시될 때 표시된 텍스트를 래핑해야 하는 경우가 많습니다. 예를 들어 텍스트가 TD 너비 또는 DIV 너비를 초과하는 등입니다.
IE에서는 단어 나누기 등이 있는데 FF에서는 작동하지 않아서 좀 알아보고 JS 스크립트를 작성해 보았습니다.
1. 페이지 스팬 요소를 찾아서 이를 사용하여 문자를 로드한 다음 해당 너비를 사용하여 문자의 표시 너비를 가져옵니다.
2. 그런 다음 문자열을 표시할 때 이전에 얻은 문자 너비를 사용하여 계산할 수 있습니다. 각 문자열의 너비
3. 이를 바탕으로 문자열이 끊어져야 할 위치를 계산하고
를 삽입하여 줄을 끊어도 문제가 되지 않습니다.
블로그의 제약으로 인해 첨부파일을 업로드할 수 없습니다. 여기서는 코드를 설명하겠습니다.
코드는 두 부분으로 구성됩니다. 하나는 대부분의 작업을 수행하는 "textWidth.js"이고, 다른 하나는 테스트 페이지입니다.
1. textWidth.js
var TextWidth = new function() { var widthLib = new Hash(); var textSpan; var self = this;
源代码 | 说明 |
---|---|
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; } |
内部成员变量 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; } |
计算字符串的长度。算法简单,就是把每个字符的宽度都加到一起就好了。 关键是getSizeLib(fontName, fontSize);这个函数,如果Hash表里没有这个字体字号的宽度数据,它会主动初始化相应的宽度数据 |
self.setSpan = function(obj) { textSpan = obj; textSpan.hide(); } |
计算折行。这个也简单,先从Hash表里拿到宽度数据,然后逐个计算,宽度超了,就加个 进去 |
function getSizeLib(fontName, fontSize) { if (!widthLib.get(getKey(fontName, fontSize))) { initwidthLib(fontName, fontSize); } return widthLib.get(getKey(fontName, fontSize)); } |
保存用于宽度计算的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); } |
取得指定字体字号的宽度数据。没有的话,就初始化一份 |
function getKey(fontName, fontSize) { return fontName+"@"+fontSize+"px"; } } |
初始化 |
<🎝> | |
widthLib는 특정 글꼴 및 글꼴 크기의 모든 문자 너비를 저장하는 해시 테이블입니다.