在 web 前端开发中，经常要处理的一种情况就是“文本溢出”。比较友好的处理方式是溢出的文本不显示，在末尾加上“…”。实现方式多种多样，可以直接后端程序截断，前端 js 截断或者 CSS 实现截断。下面介绍 CSS 截断的方法。

所谓的“图片预加载”就是先加载一张不清晰的图片，然后加载一张高清图片，实现由模糊到清晰的渐变。防止页面空白影响用户体验。具体效果请看在线演示。

原理其实很简单，使用两张图片实现：一张小的缩略图，一张大的高清图，将缩略图拉大到高清图的尺寸（这就是模糊的效果），然后加载高清图片，加载完成修改<img>标签的 src。

CSS 的两个属性white-space和word-spacing主要是设置“空白”的呈现方式的。

接着上一篇word-break，继续说说 CSS 的换行。

这次说的word-wrap，同样是设置换行的，他有两个可能的值：

• normal
• break-word

做了个Demo，大家可以打开自己看看。

要了解 CSS 的换行，先要明白两个概念：“CJK 文本”和“non-CJK”文本，CJK 代表的就是中文（Chinese）、日文（Japanese）和韩文（Korean）等亚洲语言，non-CJK 就是指非亚洲语言（英语之类的）。

CSS 的word-break指定怎样在单词内断行。他有下面几个值：

• normal（默认）
• break-all
• keep-all

下面一个一个解释：

有的时候需要直接在 Kindeditor 中写代码，例如<code>标签，编辑器本身没有这个功能的（注意“插入程序代码”是<pre>不是<code>），但是你切换“HTML 代码模式”直接写代码的时候，很多 HTML 标签和属性会被过滤掉，这就是所谓的“过滤模式”，官网有如果关闭过滤模式的文档，但是没有针对 wordpress 插件的。经过一番寻找终于修改成功，方法如下：

测试环境：HTML5 DOCTYPE，Chrome 33.0.1750.117 m，FireFox 27.0.1，Internet Explorer 11.0.9600.16428IS，IETester v0.4.11。结果直接见下表：

由于 WordPress 原本的富文本编辑器功能比较简单，所以使用了 Kindeditor 插件（安装方法看这里）。但是最近发现一个问题，就是在页面没有完全载入的情况下，代码高亮不起来，就是下图的样子：

先上 Demo，下面是代码：

;(function ($) {
  /*
   * 0-弱
   * 1-中
   * 2-强
   */

  var pswstrength = function () {}

  pswstrength.prototype = {
    constructor: pswstrength,
    //Unicode 编码区分数字，字母，特殊字符
    CharMode: function (iN) {
      if (iN >= 48 && iN <= 57)
        //数字（U+0030 - U+0039）
        return 1 //二进制是0001
      if (iN >= 65 && iN <= 90)
        //大写字母（U+0041 - U+005A）
        return 2 //二进制是0010
      if (iN >= 97 && iN <= 122)
        //小写字母（U+0061 - U+007A）
        return 4
      //二进制是0100
      //其他算特殊字符
      else return 8 //二进制是1000
    },
    bitTotal: function (num) {
      modes = 0
      for (i = 0; i < 4; i++) {
        if (num & 1)
          //num不是0的话
          modes++ //复杂度+1
        num >>>= 1 //num右移1位
      }
      return modes
    },
    check: function (sPW) {
      if (sPW.length < 7)
        //小于7位，直接“弱”
        return 0
      Modes = 0
      for (i = 0; i < sPW.length; i++) {
        //密码的每一位执行“位运算 OR”
        Modes |= this.CharMode(sPW.charCodeAt(i))
      }
      return this.bitTotal(Modes)
    },
  }

  if (typeof $.pswstrength == 'undefined' || $.pswstrength == null) {
    $.pswstrength = new pswstrength()
  }
})(jQuery)

原理主要利用二进制数，数字标记为 1，大写字母标记为 2，小写字母标记为 4，特殊字符标记为 8，他们的二进制数如下表：

• 1: 0001
• 2: 0010
• 4: 0100
• 8: 1000

位运算 OR 计算密码的每一位，得到一个四位的二进制数，从而得出密码强度。

如果不了解位运算的话，可以看看 W3School 的教程。

参考了李战大神的文章，在其基础上新增了 IE11 的支持（IE11 修改了 User-agent 字符串），直接上代码：

<script type="text/javascript">
  $(function () {
    var Sys = {}
    var ua = navigator.userAgent.toLowerCase()
    var s
    ;(s = ua.match(/rv:([\d.]+)\) like gecko/))
      ? (Sys.ie = s[1])
      : (s = ua.match(/msie ([\d.]+)/))
      ? (Sys.ie = s[1])
      : (s = ua.match(/firefox\/([\d.]+)/))
      ? (Sys.firefox = s[1])
      : (s = ua.match(/chrome\/([\d.]+)/))
      ? (Sys.chrome = s[1])
      : (s = ua.match(/opera.([\d.]+)/))
      ? (Sys.opera = s[1])
      : (s = ua.match(/version\/([\d.]+).*safari/))
      ? (Sys.safari = s[1])
      : 0

    if (Sys.ie) document.write('IE: ' + Sys.ie)
    if (Sys.firefox) document.write('Firefox: ' + Sys.firefox)
    if (Sys.chrome) document.write('Chrome: ' + Sys.chrome)
    if (Sys.opera) document.write('Opera: ' + Sys.opera)
    if (Sys.safari) document.write('Safari: ' + Sys.safari)
  })
</script>

实际效果可以查看在线演示