长标题省略用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:formatDate
					pattern="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也得说过去啊


  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值