牛骨文教育服务平台(让学习变的简单)
博文笔记

div显示字符超过固定长度是显示……的方法

创建时间:2016-09-18 投稿人: 浏览次数:1323


目前线网页遇到div显示标题的时候,如果标题过长,显示全部标题会显得很突兀,而且默认换行为首行满后再换行,有可能第二行就一个字,会很难看,这是通过CSS方法处理如下:

<div style="width:754px;  text-overflow:ellipsis;   
     white-space:nowrap; overflow:hidden;">
看人家的这样写:
<pre name="code" class="html"><div style="width:100px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid #000;
-moz-binding: url("ellipsis.xml#ellipsis");">

说存在游览器兼容问题……???

用js不存在兼容问题:
<pre name="code" class="html">function ajustHeight(node, rows){
    var v = node.innerHTML;
    node.innerHTML = "";
    var h1 = node.offsetHeight;
    node.innerHTML = " ";
    var h2 = node.offsetHeight;
    var rowHeight = h2 - h1;
    node.innerHTML = v;
    var len = v.length, i = 3;
    while(node.offsetHeight > rowHeight * rows + h1){
        node.innerHTML = v.substring(0, len - i) + "...";
        i++;
    }
}


ajustHeight(document.getElementById("div1"), 2);



引用:http://bbs.csdn.net/topics/340175777
http://www.php100.com/html/webkaifa/DIV_CSS/2009/0416/2453.html

声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。