suchen

Heim  >  Artikel  >  Web-Frontend  >  JavaScript 撑出页面文字换行_javascript技巧

JavaScript 撑出页面文字换行_javascript技巧

WBOY
WBOYOriginal
2016-05-16 18:51:321712Durchsuche

碰到一个问题，就是在页面展示的时候，很多情况下需要对显示的文字做折行处理，例如文字超过TD的宽度，或者DIV的宽度等等。
在IE下有word-break等等，但是在FF下，却是行不通，所以研究了一下，写了一个JS脚本，原理是这样的：
1. 首先，我们在页面上找一个span元素，用它来装载字符，然后通过它的宽度，来得到字符的显示宽度
2. 然后，我们在显示一个字符串的时候，就可以利用前面得到的字符宽度，计算出每个字符串的宽度
3. 在此基础上，计算出字符串应该折行的位置，插入
进行折行就不是什么问题了。
条件所限，blog不能上传附件，我在这里解释一下代码。
代码有2部分，一个是“textWidth.js”，他完成绝大部分的工作；另外一个是测试页面。
1. textWidth.js

源代码 说明 
var TextWidth = new function() { 
var widthLib = new Hash(); 
var textSpan; 
var self = this;

 内部成员变量

widthLib是一个保存某个字体、字号的所有字符的宽度的hash表；

 
 self.getWidth = function(string, fontName, fontSize) { 
    var lib = getSizeLib(fontName, fontSize); 
    var totalWidth = 0; 
     
    for(var i =0; i  255) { 
        totalWidth += lib[256]; 
      }else{ 
        totalWidth += lib[c]; 
      } 
    } 
    return totalWidth; 
  }

 计算字符串的长度。算法简单，就是把每个字符的宽度都加到一起就好了。

关键是getSizeLib(fontName, fontSize);这个函数，如果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  255) { 
        deltaW = lib[256]; 
      }else{ 
        deltaW = lib[c]; 
      } 
      if ((totalW + deltaW) > maxWidth) 
      { 
        resultText += ""; 
        totalW = deltaW; 
      }else{ 
        totalW += deltaW; 
      } 
      resultText += string.charAt(i); 
    } 
    return resultText; 
  }
 计算折行。这个也简单，先从Hash表里拿到宽度数据，然后逐个计算，宽度超了，就加个
进去		 
  self.setSpan = function(obj) { 
    textSpan = obj; 
    textSpan.hide(); 
  }
 保存用于宽度计算的span元素 
  function getSizeLib(fontName, fontSize) { 
    if (!widthLib.get(getKey(fontName, fontSize))) { 
      initwidthLib(fontName, fontSize); 
    } 
    return widthLib.get(getKey(fontName, fontSize)); 
  }
 取得指定字体字号的宽度数据。没有的话，就初始化一份 
  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
  初始化 
  function getKey(fontName, fontSize) { 
    return fontName+"@"+fontSize+"px"; 
  } 
}
  
   

下面是测试页面的代码

复制代码 代码如下:







Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS 拼图游戏 面向对象，注释完整。_javascript技巧Nächster Artikel：js 操作css实现代码_javascript技巧

In Verbindung stehende Artikel

Mehr sehen