Chinaunix首页 | 论坛 | 博客
  • 博客访问: 245278
  • 博文数量: 62
  • 博客积分: 1350
  • 博客等级: 中尉
  • 技术积分: 457
  • 用 户 组: 普通用户
  • 注册时间: 2006-09-13 09:56
文章分类

全部博文(62)

文章存档

2016年(1)

2013年(9)

2012年(18)

2011年(31)

2010年(1)

2006年(2)

分类: 系统运维

2012-07-31 13:58:17

我们在浏览网页的时候,常常会看到某些网站的文章标题由于过长而只显示一部分,另一部分用省略号来表示,这是为了防止标题过长而导致页面排版不好看。那么这个文章标题省略号是如何实现的呢?目前常见的方法是通过动态语言程序来控制,判断标题的长度,然后截取部分来显示,其余的用省略号显示,这样往往在英文和中文的长度上难以判断。今天在网上看到可以用CSS来实现,效果还不错,拿来分享。

    CSS实现截断过长标题文字的原理非常简单,就是设置一个宽度,然后超过这个宽度值的内容就隐藏,并用省略号来显示。用到的就是text- overflow:ellipsis,在IE下显示是正确的,超出部分为省略号...,而在Firefox中超出部分却是裁切掉了,有的文字就显示一半,很不好看,这是因为Firefox不支持text- overflow:ellipsis属性。为了让Firefox中也能显示省略号,所以要外加一个xml文件。下面直接给出兼容IE和Firefox的代码:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用CSS截断过长标题文字的方法-HTMertitle>
<style type="text/css">

style>
head>
<body>
<div class="htmer">使用CSS截断过长标题文字的方法-HTMerdiv>
body>
html>

ellipsis.xml文件源代码:

xml version="1.0"?>
<bindings
  
xmlns=""
  xmlns:xbl
=""
  xmlns:xul
=""
>
<binding id="ellipsis">
    
<content>
        
<xul:description crop="end" xbl:inherits="value=xbl:text"><children/>xul:description>
    
content>
binding>
bindings>
阅读(816) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~