在进行设计网页的时候，令设计者头疼之一的事是截取标题。假如我们设计的网页标题行只能显示 15 个字，再多了就会折行，很难看。但是谁能保证每次发布的信息标题都在 15 个字以内呢？这就需要用程序判断标题长度，超过 15 个字会把超过部分省略，然后标上「……」，表示标题未完成。通常做法是网站后台程序截取一定的字符然后输出到前台显示或者前台用 javascript 截取一定的字符，但是通过控制字数来截取的话还是存在一个大问题的，因为中文和英文的字符宽度问题，这个字数不好控制，而且通用性较差。而且不利于 SEO。

下边介绍一下用 css 如何来控制标题长度，这样有利于 SEO！…… 高手就路过吧，不明白的朋友可以共同学习，共同提高！

下面是网页源码

li{clear:both;width:24em;border:1px solid ＃333;margin:3px;padding:3px;height:1.3em;overflow:hidden;list-style-type:none}
h2 a{color:#06C;text-decoration:none;}
h2 a:hover{color:#06C;text-decoration:underline;}

ul{font-size:13px}
li a{color:#06C;text-decoration:none;}
li a:hover{color:#06C;text-decoration:underline;}

li a{display:block;width:24em;white-space:nowrap;overflow:hidden;float:left;
-o-text-overflow: ellipsis;    /* for Opera */
text-overflow: ellipsis;        /* for IE */
}
/*li:after{content:"...";padding-left:3px;font-size:12px;} for Firefox */
@-moz-document{
    li{
        height:1.3em;
        overflow:hidden;
    }
    li a{
        float:left;
        position:relative;
        width:23em;
        height:auto!important;
        white-space:normal!important;
        overflow:visible!important;
    }
    li:after{
        content:"...";
        float:left;
        color:#06C;
        width:1em;

    }
    li a:after{
        content:"  ";
        margin:-1.6em -2em 0 0;
        /*content:"　";
        margin:-1.6em -1em 0 0;*/
        /*content:"...";
        letter-spacing:-0.24em;
        margin:-1.6em -15px 0 0;*/
        display:block;
        text-align:right;
        color:#fff;
        background-color:#fff;
    }
}

<ul>
    <li><a href="#">用css来实现自动截取文字，不需要后台程序和JS的使用</a></li>
    <li><a href="#">好处是：有利于内容完整性，有利于 S(E,不能出现这个词啊。)O，无需后台程序处理，可以在前台随时调节要截取的长度。</a></li>
    <li><a href="#">不好的地方：不能自动判断截取长度，当字符很短的时候在 Firefox 中省略符号会提前到行首。</a></li>
    <li><a href="#">另外在设置截取宽度的时候，要注意，尽量让文字截取完整</a></li>
</ul>

Firefox 不支持 text-overflow 这个属性，可以用其他来模拟 text-overflow，但还是有许多问题（用父一层的元素的伪类:after来完成"…"，再用元素自身伪类:after来盖掉不应该出来的"…"）