css居然有根据容器宽度自动截取长度加省略号功能，强大!!

参考学习：http://www.cnblogs.com/lianjun/archive/2011/03/24/1993479.html

    项目中最初的做法（js截取）：

//字符长度截取包括中英文混合 
function subStr(str, len) {
    str = str.toString();
    var newLength = 0; 
    var newStr = ""; 
    var chineseRegex = /[^\x00-\xff]/g; 
    var singleChar = ""; 
    var strLength = str.replace(chineseRegex,"**").length; 
    for(var i = 0;i < strLength;i++) { 
            singleChar = str.charAt(i).toString(); 
            if(singleChar.match(chineseRegex) != null) { 
                    newLength += 2; 
            }else { 
                    newLength++; 
            } 
            if(newLength > len) { 
                    break; 
            } 
                    newStr += singleChar; 
    } 
    if(strLength > len) { 
            newStr += "..."; 
    } 
    return newStr; 
}


但发现无意中发现css居然有根据容器宽度自动截取长度加省略号功能，而且无需再次调用js方法去截取字符串。特别在数据比较多的table中，对每行中的列都要调用js方法，会导致页面加载时间，影响系统性能，导致用户体验不够。但会增加一点服务器流量。可以根据情况衡量使用。 

语法：

text-overflow ： clip |  ellipsis

取值：

clip： 
不显示省略标记（...），而是简单的裁切。
ellipsis： 
当对象内文本溢出时显示省略标记（...）

说明：

  1. 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow。 
  2. text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。  

兼容性：

text-overflow : clip 

text-overflow : ellipsis 

          

关于text-overflow属性如何应用，我们作如下的说明讲解：
       text-overflow:ellipsis;
       overflow:hidden;
       white-space:nowrap;
       width:200px; （标注容器的宽度）

　　text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。

   

在Div中的方法

<DIV STYLE="width: 200px; border: 1px dashed red; overflow: hidden; text-overflow:ellipsis">
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>
<NOBR>就a是比如有一行文字，很长，表格内一行显示不下.</NOBR>
<NOBR>就1是比如有一行文字，很长，表格内一行显示不下.</NOBR>
<NOBR>就F是比如有一行文字，很长，表格内一行显示不下.</NOBR>
<NOBR>就是 Like You Pig Very Very Very Much.</NOBR>
</DIV>

在Table中的方法

<TABLE style="table-layout:fixed;border-collapse:collapse;font-size:12px;" border="1" width="200" bordercolor=#666666>
<TR>
<TD nowrap style="overflow:hidden;text-overflow:ellipsis;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</TD>
</TR>
</TABLE>

示例：

 

<!DOCTYPE html>
<html>
<head>
<title>text-overflow demo</title>
<meta charset=utf-8" />
<style>
.test_demo_clip {
    text-overflow:clip; 
    overflow:hidden; 
    white-space:nowrap; 
    width:200px; 
    background:#ccc;
}
.test_demo_ellipsis {
    text-overflow:ellipsis; 
    overflow:hidden; 
    white-space:nowrap; 
    width:200px; 
    background:#ccc;
}
</style>
</head>
<body>
<h2>text-overflow : clip </h2>
  <div class="test_demo_clip">
  不显示省略标记，而是简单的裁切条
</div>
<h2>text-overflow : ellipsis </h2>
<div class="test_demo_ellipsis">
  当对象内文本溢出时显示省略标记
</div>
</body>
</html>

 

演示结果：

 

posted @ 2014-09-23 11:09  学无先后 达者为先  阅读(858)  评论(0)  编辑  收藏  举报