过长文本截取技术 text-overflow:ellipsis

Jsp代码 view plaincopy to clipboardprint?   

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

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

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

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

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

view plaincopy to clipboardprint?
<div style="width: 230px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis">  
<nobr>就是比如有一行文字，很长，表格内一行显示不下.</nobr>  
<nobr>这是不该换行的文本,这是一行不该换行的文本 ,这是文本行的结尾。</nobr>  
</div>  
<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; 不能实现省略号效果。

view plaincopy to clipboardprint?
<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>
<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>

view plaincopy to clipboardprint?
<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>  
<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; 同样不能实现省略号效果。

view plaincopy to clipboardprint?
<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>
<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>

view plaincopy to clipboardprint?
<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>  
<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; 实现了所想要得到的溢出文本显示省略号效果：

view plaincopy to clipboardprint?
<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>
<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>

view plaincopy to clipboardprint?
<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>  
<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）

 

 

个人博客正式上线，欢迎访问