JavaScript 撑出页面文字换行

碰到一个问题，就是在页面展示的时候，很多情况下需要对显示的文字做折行处理，例如文字超过TD的宽度，或者DIV的宽度等等。
在IE下有word-break等等，但是在FF下，却是行不通，所以研究了一下，写了一个JS脚本，原理是这样的：
1. 首先，我们在页面上找一个span元素，用它来装载字符，然后通过它的宽度，来得到字符的显示宽度
2. 然后，我们在显示一个字符串的时候，就可以利用前面得到的字符宽度，计算出每个字符串的宽度
3. 在此基础上，计算出字符串应该折行的位置，插入<br/>进行折行就不是什么问题了。
条件所限，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 < string.length; i++) {

      var c = string.charCodeAt(i);

      if (c > 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 < 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;

  }
 计算折行。这个也简单，先从Hash表里拿到宽度数据，然后逐个计算，宽度超了，就加个<br>进去
  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<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";

  }

}
  
   

下面是测试页面的代码


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript" src="prototype.js"></script>
<script language="javascript" src="textWidth.js"></script>
<title>无标题文档</title>
<style type="text/css">
* {
font-size: 14px;
font-family: Geneva,Arial,Helvetica,sans-serif;
}
</style>
</head>
<body>
<textarea id="in" type="text"></textarea><input type="button" value="test" onclick="runTest()"/><p/>
<textarea id="resultSpan" style="width: 900px;font-size: 14px; font-family: Geneva">
</textarea>
<div id="resultDisplay" style="font-size: 14px; font-family: Geneva;background-color:#e242E6; width:80px"></div>
<span id="textSpan" style="display:none"></span>
</body>
<script type="text/javascript">
TextWidth.setSpan($('textSpan'));
function runTest() {
$('resultSpan').innerHTML = $("in").value;
var theWidth = TextWidth.getWidth($('resultSpan').innerHTML, "Geneva", 14);
$("resultDisplay").innerHTML = TextWidth.wrapText($('resultSpan').innerHTML, "Geneva", 14, 80);
}
</script>
</html>

prototype.js请自行下载验证

赞 (0)

相关推荐

  • JavaScript 撑出页面文字换行

    碰到一个问题,就是在页面展示的时候,很多情况下需要对显示的文字做折行处理,例如文字超过TD的宽度,或者DIV的宽度等等. 在IE下有word-break等等,但是在FF下,却是行不通,所以研究了一下,写了一个JS脚本,原理是这样的: 1. 首先,我们在页面上找一个span元素,用它来装载字符,然后通过它的宽度,来得到字符的显示宽度 2. 然后,我们在显示一个字符串的时候,就可以利用前面得到的字符宽度,计算出每个字符串的宽度 3. 在此基础上,计算出字符串应该折行的位置,插入<br/>进行折行就

  • Javascript检查图片大小不要让大图片撑破页面

    如何用Javascript判断图片大小,其实只要写一个简单的函数就可以了,当然这么判断要怎么写很多人可能不知道.发觉用 ASP 判断图片大小比数牛毛还繁复, 且判断了就判断了, 还要逻辑显示...烦. 用 Javascript 判断, 轻松搞定, 最终效果无非就是不要让大图片撑破页面. <script LANGUAGE="JAVASCRIPT"> //检查图片大小是否大于预期大小, 大于则显示为预期大小 function show(chkw) { //chk images

  • JavaScript弹出窗口方法汇总

    本文实例汇总了常用的JavaScript弹出窗口方法,供大家对比参考,希望能对大家有所帮助.详细方法如下: 1.无提示刷新网页: 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点"确定"才会刷新. 而有的页面不会提示,不弹出提示窗口,直接就刷新了. 如果页面没有form, 则不会弹出提示窗口 如果页面有form表单, a)<form  method="post" ...>     会弹出提示窗口 b)<form  method=&quo

  • 如何创建一个JavaScript弹出DIV窗口层的效果

    在本教程中,我将用最通俗的语言和最简洁的代码给大家演示如何创建一个JavaScript弹出DIV窗口层的效果. 创建一个弹出DIV窗口可能是现在网站/网页制作中最常碰到的问题之一.传统的JavaScript弹窗已经不适合目前网站的设计理念了,理由有二:首先,不友好--生硬的弹出对话框且伴随着"哐"的一声对用户体验是个很大的挑战:其次,兼容性不够强--有相当多的浏览器屏蔽了这种JS的Alert()方法.于是,一个良好用户体验的网站需要一种更合理的解决方案--使用很少的HTML代码,很少的

  • JavaScript 弹出子窗体并返回结果到父窗体的实现代码

    思路:用window.showModalDialog方法获取到弹出子窗体的引用,再在子页面用window.returnValue="***"来返回结果. 示例代码:(用jQuery简化实现) 父页面:parent.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional

  • 原生JavaScript写出Tabs标签页的实例代码

    最近在重新学习JavaScript,手写了一个tabs标签页. 话不多说,直接开始. 首先,是前端页面. 图1 tabs 先来把tabs分解一下: 图2 tabs分解 首先,一个大的框div,上面红色的框是导航栏nav,导航栏里是一个无序列表ul,里面三个li标签(黄色的框),li标签里两个绿色标签是两个span,一个用来放导航的名字,一个用来放导航关闭的icon,右边是一个button,用来添加新的导航栏及内容:下方是导航栏的内容section. 导航tabs.html代码如下: <!DOCT

  • javascript实现简单页面倒计时

    javascript实现简单页面倒计时

    本文实例为大家分享了javascript实现简单页面倒计时的具体代码,供大家参考,具体内容如下 话不多说,直接贴代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> body { color:red; text-align: center; } .one{ color:black; text-align

  • JavaScript将Web页面内容导出到Word及Excel的方法

    本文实例讲述了JavaScript将Web页面内容导出到Word及Excel的方法.分享给大家供大家参考.具体实现方法如下: <HTML> <HEAD> <title>WEB页面导出为EXCEL文档的方法 </title> </HEAD> <body> <BR> <table id = "PrintA" width="100%" border="1" cel

  • javascript弹出拖动窗口

    可以拖动的弹出窗口,在很多网页上都可以见到,非常的人性化,下面通过一段javascript代码就可以实现弹出拖动窗口,废话不多说了,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>

  • 使用JavaScript实现在页面中显示距离2017年中秋节的天数

    废话不多说了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在页面中显示距离2017年中秋节的天数</title> <script type="text/javascript"> function countdown(title,Intime,divI

随机推荐