【小技巧】过长文本截取技术 text-overflow:ellipsis

这几天做公司内网，首页有很多处理是要截取字符串的，目前以我的水平只会用JSTL表达式中的函数来截取，截取长度为length过多省略的代码如下：

${fn:substring(str, 0, length)} <c:if text="${fn:length(str) gt length}">...</c:if>

上述代码的缺点：1、过于死板，字数大于length只显示length长度的字符串，导致如果是字母（字母比数字窄）被截取后显示更短，不美观；2、依赖于JSTL库；3、代码冗余度高；4、标题不完整，不便于搜索引擎搜索。

看看CSS带来的神奇效果，佩服没话说，代码：

<div style="width: 230px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis"> <nobr>就是比如有一行文字，很长，表格内一行显示不下.</nobr> <nobr>这是不该换行的文本,这是一行不该换行的文本 ,这是文本行的结尾。</nobr> </div>

解释：<nobr></nobr>标签与<br/>标签对立，表示不换行，这里最强的是text-overflow:ellipsis；来看一CSS中对这一属性的解释：

语法：
　　text-overflow : clip | ellipsis

　　参数：
　　clip : 　不显示省略标记（...），而是简单的裁切
　　（clip这个参数是不常用的！）
　　ellipsis : 　当对象内文本溢出时显示省略标记（...）

　　说明：
　　设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。
　　最大的缺点：text-overflow:ellipsis属性在FF中是没有效果的。

使用时注意以下几点：（以下文章来自：http://www.mb5u.com/divcssjiaocheng/14015.html）

一、仅定义text-overflow:ellipsis; 不能实现省略号效果。

<mce:style type="text/css"><!-- ul {width:300px; margin:50px auto;} li {width:300px; line-height:25px; text-overflow:ellipsis;} a {color:#03c; font-size:13px;} a:hover {color:#000;} --></mce:style><style type="text/css" mce_bogus="1">ul {width:300px; margin:50px auto;} li {width:300px; line-height:25px; text-overflow:ellipsis;} a {color:#03c; font-size:13px;} a:hover {color:#000;}</style> <ul> <li>CSS实战精萃 - Pro CSS Techniques <li>CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败 <li>CSS布局实例：CSS标签切换代码实例教程 <li>Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离 <li>解决IE7以下版本不支持无A状态伪类的几种方法！ <li>CSS去除表格td默认间距及制作1px细线表格 </ul>

二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果。

<mce:style type="text/css"><!-- ul {width:300px; margin:50px auto;} li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap;} a {color:#03c; font-size:13px;} a:hover {color:#000;} --></mce:style><style type="text/css" mce_bogus="1">ul {width:300px; margin:50px auto;} li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap;} a {color:#03c; font-size:13px;} a:hover {color:#000;}</style> <ul> <li>CSS实战精萃 - Pro CSS Techniques <li>CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败 <li>CSS布局实例：CSS标签切换代码实例教程 <li>Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离 <li>解决IE7以下版本不支持无A状态伪类的几种方法！ <li>CSS去除表格td默认间距及制作1px细线表格 </ul>

三、同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果：
<mce:style type="text/css"><!-- ul {width:300px; margin:50px auto;} li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} a {color:#03c; font-size:13px;} a:hover {color:#000;} --></mce:style><style type="text/css" mce_bogus="1">ul {width:300px; margin:50px auto;} li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} a {color:#03c; font-size:13px;} a:hover {color:#000;}</style> <ul> <li>CSS实战精萃 - Pro CSS Techniques <li>CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败 <li>CSS布局实例：CSS标签切换代码实例教程 <li>Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离 <li>解决IE7以下版本不支持无A状态伪类的几种方法！ <li>CSS去除表格td默认间距及制作1px细线表格 </ul>

请您非凡注重，text-overflow:ellipsis属性在FF中是没有效果的。（Y_Y）