首页 > Web开发, 编程语言 > Web中的省略号

Web中的省略号

2009年12月15日 发表评论 阅读评论 3,242 人阅读    

在Web开发中,对于一种情况很常见。那就是,文本太长,而放置文本的容器不够长,而我们又不想让文本换行,所以,我们想使用省略号来解决这个问题。但是,在今天HTML的标准中并没有相关的标识或属性让你可以简单地完成这个事。但是我们可以使用CSS样式表来完成这个事,在IE,Safari,Chrome,Opera中都可以。但在Firefox中却不行,但我们可以使用jQuery来解决Firefox不兼容的问题。下面是相关的代码示例。

使用CSS设置省略号

overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 100%;

  • overflow 属性是必需的,并且属性要是hidden。
  • white-space: nowrap 也是必需的。如果文本可以自动换行,就算是不可见,也不会有省略号的。因为文本换行了,所以没有超过容器的尺寸,所以也就不会有省略号了。
  •  width 属性仅在需要支持IE6时设置。 设置成100%仅是为了解决IE6的不兼容问题。(关于IE中的那些不兼容问题,你可以参看本站的《9个最常见IE的Bug及其fix》)
  • text-overflow: ellipsis 就是设置省略号了。目前还不是HTML的标准规范。其是由IE引入的,可以在IE6+,Safari 3.2+和Chrome上工作。
  • -o-text-overflow: ellipsis 是 Opera 支持的。可以在 Opera 9.0+使用。

使用jQuery设置省略号

正如前面所说过的,Firefox并不支持CSS中的那些省略号设置,因为那并不是标准的HTML规范。所以,我们需要使用jQuery的Javascript来干这个事。你可以下载由Devon Govett写的jQuery 省略号插件,于是,你可以简单的把”ellipsis”赋给某些元件或是CSS定义,如下所示:

$(document).ready(function() {
    $('.ellipsis').ellipsis();
}

或是

$("span").ellipsis();

(转载本站文章请注明作者和出处 酷 壳 – CoolShell.cn ,请勿用于任何商业用途)

——=== 访问 酷壳404页面 寻找遗失儿童。 ===——
好烂啊有点差凑合看看还不错很精彩 (4 人打了分,平均分: 4.25 )
Loading ... Loading ...
  1. sure-one
    2009年12月16日21:10 | #1

    你用的是jquery哪个版本?我在最新的1.3.2版里搜索了半天都没找到ellipsis方法。。。

  2. 2009年12月16日21:35 | #2

    不错,如果CSS能控制,就不用程序来把文字截断了,对SEO也有好处。如果不用Jquery就能实现的话,那就完美了。

  3. 2009年12月21日12:45 | #3

    sure-one :
    你用的是jquery哪个版本?我在最新的1.3.2版里搜索了半天都没找到ellipsis方法。。。

    都说了是个插件啦

  4. 2010年1月15日14:03 | #4

    插件找不到,站长能否提供一个下载链接?

  5. 2010年12月24日14:29 | #5

    不错不错~ :)

  1. 2012年3月19日12:46 | #1