这几天做公司内网,首页有很多处理是要截取字符串的,目前以我的水平只会用JSTL表达式中的函数来截取,截取长度为length过多省略的代码如下:
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>
解释:<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>
二、定义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>
三、同时应用: 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>
请您非凡注重,text-overflow:ellipsis属性在FF中是没有效果的。(Y_Y)
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/xxd851116/archive/2009/05/16/4193489.aspx
分享到:
相关推荐
NULL 博文链接:https://zsp.iteye.com/blog/261175
听说用css的 text-overflow: ellipsis 也可以实现,于是尝试了下。 发现除了设置 text-overflow 属性为 ellipsis 外 还需要设置 white-space 属性为 nowrap (限制不换行) 和 overflow 属性为 hidden (隐藏溢出...
text-overflow的使用需配合hight,over-flow:hidden;white-space:nowrap;三个属性共同使用 text-overflow: clip;ellipsis;string clip: 直接隐藏不显示 ellipse: 用… 三个点来表示溢出的文字 (常用) string:可...
字超出规定范围时,可以用省略号显示,这里我们可以使用text-overflow:ellipsis来实现省略号显示,下面有个不错的示例,感兴趣的朋友可以参考下
text-overflow:ellipsis; text-overflow: ellipsis;/* IE/Safari */ -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis;/* Opera */ -moz-binding: url("ellipsis.xml#ellipsis");/*FireFox*/ } 任意长度...
首先平时用的时候要配合 复制代码代码如下: overflow: hidden; white-space: nowrap; 这两个属性让起溢出隐藏和不换行,然后IE8用的时候记得不要加 复制代码代码如下: word-berak:break-all;... -o-text-overflow
定义文本样式 css3与html5源码3种 ... -o-text-overflow: ellipsis; /* Opera */ text-overflow: ellipsis; /* IE, Safari (WebKit) */ [removed]: url('ellipsis.xml#ellipsis'); /* Firefox */ } </style>
text-overflow:ellipsis; overflow:hidden; white-space:nowrap; font-size:36px; width:400px; } p { text-overflow:ellipsis; overflow:visible; white-space:nowrap; font-size:36px; width:400px; ...
大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 但是这个属性并不...
超过宽度显示省略号(无js无hack全兼容) .
text-overflow:ellipsis; white-space:nowrap; overflow:hidden; >a b c d e f g h i j k l , msa sd sd sa w df f text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备...
text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决方法如下: display:-...
text-overflow:clip | ellipsis 这个属性使用必须通过几个属性一块才能使用 1,overflow:hidden; 这个属性是内容区装不下内容应该怎么办。这里让溢出内容直接不显示。这个感觉就是必备的属性。我内容文本溢出全部...
禁用页面滚动条的方法有很多,但最简单、最快的也就数overflow: hidden了,下面是禁用html及body滚动条的方法,兼容IE6、7
text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}img 图片设定高宽后模糊img { width: 100px; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-...
在w3cschool中css3中有个文本相关的属性text-overflow,当把它设为ellipsis时文本溢出内容就能显示为省略标记,而设为clip时就能把文本溢出的部分裁切掉,当然,前提是设置好两个属性,那就是white-space:nowrap...
方法一:用CSS截断字符串:... text-overflow:ellipsis; text-overflow: ellipsis;/* IE/Safari */ -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis;/* Opera */ [removed]: url(“ellipsis.xml#ellipsis”)
text-overflow:ellipsis; white-space:nowrap; course:hand; margin:0 auto;} HTML---------------------- <div class="text">非常多的字数你能控制得了不可能的骗你是小狗</div> ----------------------------...