很罗嗦地实现HTML5的一个小特性

　　话说博客园首页有个文章列表，大家注意到了吧？好像是废话。布局上马马虎虎过得去，不过细看，偶眼光比咱首都的车检员差得远，还是能发现有违背社会和谐之处：

　　各个文章的概要长度七零八落，看上去不太齐整。前几天项目中也碰到这样问题，而且要截的内容可能包含许多RichText。现在没有一个浏览器支持哪种样式，可以将在超出范围内容自动截断并加省略号。我等追求完美之人，怎么能一个substring了之呢？不信邪，研究了大半天，还真搞出了点名堂。现在地皮好贵，文字也得蜗居，不过比较人性化一点，固定的容器显示尽可能多的内容，超过了加省略号。这篇文章就想解决这么点问题，跟不屑的朋友说声Sorry。

　　对于留下来的朋友, 也不废话了，直接上代码：先实现只截取文本，不截断标签。

    String.prototype.subtext = function(len) { 
        var sections = [];
        var positions = [];

        var me = this.replace(/<[^>]*>|&nbsp;/g, function(m, i) {
            sections.push(m);
            positions.push(i);
            return "";
        }).substr(0, len);

        for (var i = 0; i < sections.length; i++) {
            if (positions[i] > me.length) break;
            me = me.substr(0, positions[i]) + sections[i] + me.substr(positions[i], me.length);
        }
        while (/<\/[^>]*>/.test(sections[i])) {
            me += sections[i]; i++;
        }  
        return me;
    }

 

　　然后通过offsetHeight判断是否内容是否溢出。一般情况是一个固定高度div做容器，设置了overflow:hidden。有标题有内容，标题可能两行。

    function truncateContent(sh) {
        var divDes = $('divDes');
        var getTextLength = function() { return (divDes.innerText || divDes.textContent).length };
        
        var divTitle = $('divTitle');
        if (divTitle.offsetHeight > 25) sh -= 13; 
         if (divDes.offsetHeight < sh) return;

        var len = getTextLength();
        var ellipsis = " ......";
        var des = divDes.innerHTML;

        while (divDes.offsetHeight > sh) {
            len = parseInt(len / 2);
            divDes.innerHTML = des.subtext(len);
        }
        var step = 100, n = 20;
        while (step > 1) {

            while (divDes.offsetHeight < sh) {
                divDes.innerHTML = des.subtext(getTextLength() + step - 7) + ellipsis;
                if (--n < 1) break;
            }
            step = parseInt(step / 2);

            while (divDes.offsetHeight > sh) {
                divDes.innerHTML = des.subtext(getTextLength() - step - 7) + ellipsis;
                if (--n < 1) break;
            }
            step = parseInt(step / 2);
        }
        des = divDes.innerHTML.substr(0, divDes.innerHTML.length - ellipsis.length);
        divDes.innerHTML = des.substr(0, des.lastIndexOf(" ")) + ellipsis;
    }

 　 好像挺麻烦的，没办法，呼唤HTML 5赶紧推广吧。

　　这是效果：

　　

　　昨天朋友（也是程序员）跟我说工作整天重复劳动没意思，又学不到东西。可是据我所见，到处都有可学的东西，这一点东西都要研究这么久。虽然本身价值可能有限（subtext函数应该是比较有用的，还可以.Net后台实现），但至少锻炼了正则替换和算法，这是Copy多少代码也挣不来滴。