cari

Rumah  >  Artikel  >  hujung hadapan web  >  JavaScript 撑出页面文字换行_javascript技巧

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

WBOY
WBOYasal
2016-05-16 18:51:321712semak imbas

碰到一个问题，就是在页面展示的时候，很多情况下需要对显示的文字做折行处理，例如文字超过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"; 
  } 
}
  
   

下面是测试页面的代码

复制代码 代码如下:







Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JS 拼图游戏 面向对象，注释完整。_javascript技巧Artikel seterusnya：js 操作css实现代码_javascript技巧

Artikel berkaitan

Lihat lagi