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

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

WBOY
Lepaskan: 2016-05-16 18:51:32
asal
1738 orang telah melayarinya

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

 内部成员变量

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; 
  } 
Salin selepas log masuk

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

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

下面是测试页面的代码

复制代码 代码如下:







Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan