截字是一个很恶心的问题。为了照顾表现上的需要,通常需要把过长的句子,比如一个列表中的新闻标题,截短。 通常这由程序员使用后台技术(各种流行的语言,PHP, JSP等)或者前台技术(JavaScript)来处理。我个人倾向于使用前台技术,因为这对提高网页的亲和力(accessibility)有好处。在非桌面型的浏览器中,用户可以更方便的掌握信息完整性。 根据专家观察,这样的理论和现象都是值得各位站长深思的,所以希望大家多做研究学习,争取总结出更多更好的经验!

  text-overflow是CSS3的一个属性(property),它可以截短过长的字符串,并依据值(value)来决定被截掉部分使用何种方式展现。目前,IE已经实现对其的支持,Opera也有了私有属性(-o-text-overflow)对其支持,Firefox似乎落后一步……支持的两者都可使用ellipsis 值,把截掉部分替代成省略号(即ellipsis)。 根据专家观察,这样的理论和现象都是值得各位站长深思的,所以希望大家多做研究学习,争取总结出更多更好的经验!

  所以,你要做的只是,把需要截字的元素定好宽度,和overflow一起使用,即可实现效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.content {
width:100px;
border:red 1px solid;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;/*以省略号替代截除部分*/
}
-->
</style>
</head>

<body>
<div class="content">此处显示   class "content" 的内容</div>
</body>
</html>

Last modification:February 16th, 2010 at 09:29 pm
如果觉得我的文章对你有用,请随意赞赏