【小技巧】过长文本截取技术 text-overflow:ellipsis
2009-05-16 20:59
344 查看
这几天做公司内网,首页有很多处理是要截取字符串的,目前以我的水平只会用JSTL表达式中的函数来截取,截取长度为length过多省略的代码如下:
上述代码的缺点:1、过于死板,字数大于length只显示length长度的字符串,导致如果是字母(字母比数字窄)被截取后显示更短,不美观;2、依赖于JSTL库;3、代码冗余度高;4、标题不完整,不便于搜索引擎搜索。
看看CSS带来的神奇效果,佩服没话说,代码:
解释:<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; 不能实现省略号效果。
二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果。
三、同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果:
请您非凡注重,text-overflow:ellipsis属性在FF中是没有效果的。(Y_Y)
${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)
相关文章推荐
- 【小技巧】过长文本截取技术 text-overflow:ellipsis
- 单行文本过长自动替换为省略号的css写法:text-overflow:ellipsis;
- 截取长文本,显示省略号(text-overflow:ellipsis)
- CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法
- 多行文本溢出显示省略号(…) text-overflow: ellipsis
- CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
- text-overflow:ellipsis ,溢出文本显示省略号
- 多行文本溢出显示省略号(…) text-overflow: ellipsis
- 溢出文本自动带省略号省略(text-overflow: ellipsis;)的方法
- HTML中实现指定行的文本以...结尾(类似text-overflow:ellipsis效果)
- 溢出文本显示省略号,关于text-overflow:ellipsis的那些事
- 使用 text-overflow: ellipsis 实现溢出文本省略号显示
- 使用text-overflow:ellipsis实现溢出文本省略号显示无需js
- css基础 -文本溢出 text-overflow:ellipsis;
- 设置元素text-overflow: ellipsis后引起的文本对齐问题
- 使用text-overflow:ellipsis实现溢出文本省略号显示无需js
- CSS基础:text-overflow:ellipsis溢出文本的显示样式
- text-overflow:ellipsis,让溢出文本显示省略号
- CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法
- text-overflow:ellipsis,当对象内文本溢出时显示省略标记(...)