脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript 文字换行

JavaScript 撑出页面文字换行

 更新时间：2009年06月15日 18:59:44   作者：  
最近在做Web 页面，虽然不是很喜欢，不过既然公司安排了，就好好做吧，还是学了不少东西。

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

相关文章

  • 原生JS实现简单放大镜效果

    原生JS实现简单放大镜效果

    这篇文章主要为大家详细介绍了原生JS实现简单放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • JavaScript数组的使用详解

    JavaScript数组的使用详解

    这篇文章主要介绍了JavaScript数组的使用方法，数组（Array）是有序的元素序列。若将有限个类型相同的变量的集合命名，那么这个名称为数组名，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • JavaScript用200行代码制作打飞机小游戏实例

    JavaScript用200行代码制作打飞机小游戏实例

    本篇文章主要介绍了JavaScript用200行代码制作打飞机小游戏实例，非常具有实用价值，需要的朋友可以参考下
    2017-06-06
  • uniapp添加操作日志的方法(uniapp、日志、文件、html5+)

    uniapp添加操作日志的方法(uniapp、日志、文件、html5+)

    近期一直在写微信小程序,有一个问题一直没有解决,就是在测试环境中调试代码会打印很多日志,方便看到问题所在,这篇文章主要给大家介绍了关于uniapp添加操作日志(uniapp、日志、文件、html5+)的相关资料,需要的朋友可以参考下
    2023-11-11
  • javascript中的replace函数(带注释demo)

    javascript中的replace函数(带注释demo)

    在js中有两个replace函数 一个是location.replace(url) 跳转到一个新的url.一个string.replace("xx","yy") 替换字符串 返回一个新的字符串，该方法并不改变字符串本身。下面通过本文给大家介绍javascript中的replace函数
    2018-01-01
  • 10大Js图像处理库

    10大Js图像处理库

    这篇文章主要介绍了10大Js图像处理库，对图像处理感兴趣的同学，可以参考下
    2021-04-04
  • js、css、img等浏览器缓存问题的2种解决方案

    js、css、img等浏览器缓存问题的2种解决方案

    浏览器缓存的意义在于提高了执行效率，但是也随之而来带来了一些问题，导致服务端修改了js、css，客户端不能更新，下面有几个不错的方法可以解决此问题，感兴趣的朋友可以参考下
    2013-10-10
  • JavaScript设计模式手写示例讲解

    JavaScript设计模式手写示例讲解

    这篇文章主要介绍了JavaScript设计模式手写示例，设计模式（Design pattern） 是解决软件开发某些特定问题而提出的一些解决方案也可以理解成解决问题的一些思路。通过设计模式可以帮助我们增强代码的可重用性、可扩充性、 可维护性、灵活性好
    2022-12-12
  • JS实现简单计数器

    JS实现简单计数器

    这篇文章主要为大家详细介绍了JS实现简单计数器，有加、减和零三个按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 两种WEB下的模态对话框 （asp.net或js的分别实现）

    两种WEB下的模态对话框 （asp.net或js的分别实现）

    在如今互联网网站上，AJAX效果风靡一时，应该说AJAX技术在未来几年不会动摇，在AJAX效果中，模态对话框是比较常见的效果，也是非常适用的。
    2009-12-12

最新评论