长标题省略用css属性，原来的我只是一厢情愿

大多数网站为了美观，首页上面的或者是文章列表的文章的长度超过一定长度以后，就把后面的都删除掉，用一堆省略号代替；

所以我想了一下，java嘛，一个string类里面就有截取字符的方法，同时吧做web项目也要用点面向对象的思想------

于是我就这么处理了：

创建一个Utils.java，用来出来相应的title字段的长度：

public class Utils {// 对于指定的字符串按照固定的长度做截取private static String subString(String src, int length) {StringBuffer bf = new StringBuffer();if (src.length() > length) {src = src.substring(0, length);bf.append(src);bf.append("...");} else {bf.append(src);}return bf.toString();}// 把传递过来的集合里面的文章信息的title按照相应的格式做处理public static List subTitle(ArrayList articles, int length) {Iterator iter = articles.iterator();List indexarticlelist = new ArrayList();while (iter.hasNext()) {Article a = (Article) iter.next();Article article = new Article();article.setId(a.getId());article.setTitle(subString(a.getTitle(), length));article.setAuthor(a.getAuthor());article.setCreatetime(a.getCreatetime());article.setSource(a.getSource());article.setContent(a.getContent());indexarticlelist.add(article);}return indexarticlelist;}}

好吧，这样也没有办法啊，原来想在jsp里面直接判断，但是jsp不方便，就写了一个这个，又不能上数据流失，于是BeanUtils也没有起到作用

在servlet里面就这么一调用就行了啊：

List articles = articleDao.qureyHeadline(2);List headline = new ArrayList();headline = Utils.subTitle((ArrayList) articles, 15);request.setAttribute("headline", headline);

不过只是我的一厢情愿，这样的话太不划算了，弄了半天就那么一点效果，并且影响程序的运行，不知道会不会导致分页显示的先后顺序

其实再简单一点用jstl就可以搞定啊：

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%><c:if test="${fn:length(supply.title)>=20}">${fn:substring(supply.title,0,15)}.....</c:if><c:if test="${fn:length(supply.title)<20}">${supply.title }</c:if> 

或者思考一下效率问题，很简单的一个css控制就能搞定的啊：

记得下次遇到问题先百度吧，这次就当做锻炼一下自己的头脑了：

text-overflow是一个比较特殊的属性，在CSS手册中，这个属性是这样定义的：
语法： 
text-overflow : clip | ellipsis 
参数： 
　　clip : 　不显示省略标记（...），而是简单的裁切
　　（clip这个参数是不常用的！）
　　ellipsis : 　当对象内文本溢出时显示省略标记（...）

text-overflow是一个比较特殊的样式，我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，

如：标题文件有50个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text-overflow:ellipsis，

输出的标题是完整的，只是受容器大小的局限不显示出来罢了。

text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。

我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。

只有这样才能实现溢出文本显示省略号的效果。

好吧,现在果断的把Utils.java删除了，在页面上直接这样处理：

main.css

.sub {display: -moz-inline-box;display: inline-block;width: 160px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}

index.jsp

<c:forEach items="${articles }" var="a"><div class="index_topic_list"><img src="images/h_article.gif"><a href="article.jsp?articleId=${a.id }"title="${a.title } | 作者：${a.author } | 发布时间：<fmt:formatDate value="${a.createtime}"pattern="yyyy-MM-dd" />"><span class="sub">${a.title }</span></a><span style="float: right">[<fmt:formatDatepattern="yyyy-MM-dd" value="${a.createtime}" />]</span></div></c:forEach>

下面就是简单的效果：

好吧，到这里问题又来了，为什么css的属性别的这么多呢？明明这样就可以搞定：

.sub {width: 160px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}

原因出在了这里：

如果是对于普通的ul列表就没有这种情况了，直接限定li的width不就可以了吗，但是关键现在是span，不想换成li的我就这么做了：

在默认的情况下，利用css样式对span进行宽度设定是无效，

思路：这看上去是个很简单的问题，似乎用style中的width属性就可以。

然而通过试验以后发现，无论是在Firefox还是IE中都无效。

在css2的标准中，查阅关于width的定义，我们可以发现，原来css中的width属性并不总是有效的，

如果对象是inline对象，width属性就会被忽略。Firefox和IE都遵循了这个标准。

1、初步解决span宽度方案

修改span为block类型。在span的css中增加display属性，将span设置为block类型。

sub {background-color:#fc0;display:block;width:150px;}

这样宽度就可以实现了，不过这样做也把前后文字隔在不同行里面。这样其实span就完全变成了div。

2、进一步解决span宽度方案

然后我们再增加一个css属性float，这样的确在某种条件下能解决问题。

sub {background-color:#fc0;display:block;float:left;width:150px;}

但如果span前面没有文字，那的确是可行的。但是如果有了，前后文字就会连在一起，而span跑到了第二行。

其实，在Html的各种Element中，的确有既是inline，又能够设定宽度的情况存在。

例如button对象，就可以很好的在文字中间出现，并且设定宽度。

能不能让span象button那样显示呢？通过css2标准中display的定义和inline对象的解释，

发现css2标准的制定者把所有的Element在是否属于inline上做了非此即彼的规定，要么是inline，

要么是block，没有制定button那样既是inline，又可以象block那样设置宽度的属性值。

在css2.1标准草案中display的定义中增加了一个叫inline-block的属性值，针对的恰好是我们面对的这种情形。

那么再看看各种浏览器的对应情况。Firefox：通过display的文档了解到，inline-block在未来的Firefox 3中会实现。

通过Mozllia扩展属性参考了解到，在Firefox 3以前的版本，例如现在的Firefox 2中，可以用-moz-inline-box达到同样的效果。

IE：通过MSDN中的display文档了解到，inline-block已经实现。实际测试发现IE 6.0以后都没问题。

3、完美的解决span宽度方案

下面代码的css定义完美解决了span的宽度设置问题。由于浏览器通常对不支持的css属性采取忽略处理的态度，

所以最好将display:inline-block行写在后面，这样在Firefox里面，如果到了未来的Firefox 3，这一行就能起作用，代码可以同时兼容各种版本。

.sub {display: -moz-inline-box;display: inline-block;width: 160px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}

好吧，这样就差不多了我也该睡觉了。

也小感叹一下，学java的html，css也得说过去啊