欢迎来到Java学习网!
设为首页 | 加入收藏
当前位置: 首页 > Java语言 > CSS教程 >

为了照顾表现上的需要,通常需要把过长的句子,比如一个列表中的新闻标题,截短。

  通常这由程序员使用后台技术(各种流行的语言,PHP, JSP等)或者前台技术(JavaScript)来处理。我个人倾向于使用前台技术,因为这对提高网页的亲和力(accessibility)有好处。在非桌面型的浏览器中,用户可以更方便的掌握信息完整性。

  text-overflow是CSS3 的一个性质(property),它可以截短过长的字符串,并依据值(value)来决定被截掉部分使用何种方式展现。目前,IE已经实现对其的支持,Opera也有了私有属性(-o-text-overflow)对其支持,Firefox似乎落后一步……支持的两者都可使用ellipsis 值,把截掉部分替代成省略号(即ellipsis)。

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

  但是Firefox不支持,所以大概你知道我下面要干什么了。 :)

  然后,我的解决方案是,利用伪类:after增加省略号,再把它定位到右边即可。效果有点粗糙,但简洁明了,纯CSS实现。

  具体过程不说了,看案例,有兴趣者看看源码,很容易理解的。

<!DOCTYPEhtml PUBLIC "-//W3C//DTD <a class="channel_keylink" href="http://www.javaweb.cc/">XHTML</a> 1.0 Strict//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="//www.w3.org/1999/xhtml" xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="author" content="Java中文网, http://www.javaweb.cc/"/>
<meta name="copyright" content="创作共用(CreativeCommons),//www.creativecommons.cn/licenses/by-nc-sa/1.0/" />
<title>使用<a class="channel_keylink" href="http://www.javaweb.cc/">CSS</a>截字</title>
<style type="text/css">
* {margin: 0; padding: 0; }
a { text-decoration: none; color: #df3a0e; }
ul { width: 200px; margin: 40px auto; padding: 12px 4px 12px 24px;border: 1px solid #005fb0; background: #e0f1ff; }
li { margin: 12px 0;width: 200px; }
li a { display: block; width: 200px; overflow: hidden;white-space: nowrap; -o-text-overflow: ellipsis; text-overflow:ellipsis; } /* firefox only */
li:not(p) { /* wtf is? pls let me know*/clear: both; }
li:not(p) a { max-width: 170px; float: left; }
li:not(p):after { content: "..."; float: left; width: 25px;padding-left: 5px; color: #df3a0e; }
</style>
</head>
<body>
<ul>
<li><a href="#"title="Java中文网">Java中文网</a></li>
<li><a href="#"title="我欲与君相知,长命无绝衰。">我欲与君相知,长命无绝衰。</a></li>
<li><a href="#"title="DIV+CSS布局-山无陵,江水为竭,冬雷震震">DIV+CSS布局-山无陵,江水为竭,冬雷震震</a></li>
<li><a href="#"title="CSS截字功能-夏雨雪,天地合,乃敢与君绝">CSS截字功能-夏雨雪,天地合,乃敢与君绝</a></li>
<li><a href="#"title="痴情女子对爱人的热烈表白,在艺术上很见匠心诗的主人公在呼天为誓,直率地表示了“与君相知,长命无绝衰”的愿望">痴情女子对爱人的热烈表白,在艺术上很见匠心诗的主人公在呼天为誓,直率地表示了“与君相知,长命无绝衰”的愿望</a></li>
<li><a href="#"title="Java中文网:http://www.javaweb.cc/表达了热恋中人特有的绝对化心理">Java中文网:http://www.javaweb.cc/表达了热恋中人特有的绝对化心理</a></li>
</ul>
</body>
</html>

    相关教程
    推荐内容