検索

ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript はページの行折り返しをサポートします。 text_javascript スキル

JavaScript はページの行折り返しをサポートします。 text_javascript スキル

WBOY
WBOYオリジナル
2016-05-16 18:51:321742ブラウズ

問題が発生しました。ページを表示するときに、多くの場合、表示されたテキストを折り返す必要があります。たとえば、テキストが TD の幅、または DIV の幅などを超えています。
IEではワードブレークなどがありますが、FFでは動かないので調べてJSスクリプトを書きました。 原理は以下の通りです。
1.ページ Span 要素を見つけて、それを使用して文字をロードし、その幅を使用して文字
2 の表示幅を取得します。その後、文字列を表示するときに、前に取得した文字幅を使用して計算できます。各文字列の幅
3. これを基に、文字列を改行する位置を計算し、
を挿入して改行しても問題ありません。
条件が限られているため、ブログでは添付ファイルをアップロードできません。ここでコードを説明します。
コードには 2 つの部分があり、1 つはほとんどの作業を行う「textWidth.js」で、もう 1 つはテスト ページです。
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 は、特定のフォントとフォント サイズのすべての文字の幅を保存するハッシュ テーブルです。
文字列の長さを計算します。アルゴリズムは単純で、各文字の幅を加算するだけです。 キーは getSizeLib(fontName, fontSize); この関数は、ハッシュ テーブルにこのフォント サイズの幅データがない場合、対応する幅データをアクティブに初期化します
改行を計算します。これも簡単です。まずハッシュ テーブルから幅のデータを取得し、幅を超える場合は
を追加します。
幅の計算に使用されるスパン要素を保存します。
指定されたフォントサイズの幅データを取得します。そうでない場合は、1 つを初期化します
初期化
transitional.dtd"> 🎜>


無題ドキュメント