当前位置:学学看123知识中心电脑教学网页设计使用CSS截断过长标题文字的方法» 正文

使用CSS截断过长标题文字的方法

[06-11 19:38:28]   来源:http://www.xxk123.com  网页设计   阅读:8907

导读: 我们在浏览网页的时候,常常会看到某些网站的文章标题由于过长而只显示一部分,另一部分用省略号来表示,这是为了防止标题过长而导致页面排版不好看。那么这个文章标题省略号是如何实现的呢?目前常见的方法是通过动态语言程序来控制,判断标题的长度,然后截取部分来显示,其余的用省略号显示,这样往往在英文和中文的长度上难以判断。今天在网上看到可以用CSS来实现,效果还不错,拿来分享。 CSS实现截断过长标题文字的原理非常简单,就是设置一个宽度,然后超过这个宽度值的内容就隐藏,并用省略号来显示。用到的就是text-overflow:ellipsis,在IE下显示是正确的,超出部分为省略号...,而在Firefox中超出部分却是裁切掉了,有的文字就显示一半,很不好看,这是因为Firefox不支持text- overflow:ellipsis属性。为了让Firefox中也能显示省略号,所以要外加一个xml文件。下面直接给出兼容IE和Firefox的代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio

使用CSS截断过长标题文字的方法,标签:网页设计教程,网页设计知识,http://www.xxk123.com

    我们在浏览网页的时候,常常会看到某些网站的文章标题由于过长而只显示一部分,另一部分用省略号来表示,这是为了防止标题过长而导致页面排版不好看。那么这个文章标题省略号是如何实现的呢?目前常见的方法是通过动态语言程序来控制,判断标题的长度,然后截取部分来显示,其余的用省略号显示,这样往往在英文和中文的长度上难以判断。今天在网上看到可以用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" "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>使用CSS截断过长标题文字的方法-HTMer</title>
<style type="text/css">
<!--
.htmer{
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;      /*兼容IE*/
-moz-binding: url('ellipsis.xml#ellipsis');      /*兼容Firefox,调用ellipsis.xml文件,注意ellipsis.xml文件路径*/
}
-->
</style>
</head>
<body>
<div class="htmer">使用CSS截断过长标题文字的方法-HTMer</div>
</body>
</html>

   ellipsis.xml文件源代码:

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
<binding id="ellipsis">
    <content>
        <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
    </content>
</binding>
</bindings>
Tag:网页设计网页设计教程,网页设计知识电脑教学 - 网页设计
《使用CSS截断过长标题文字的方法》相关文章

Copyright 学学看123 All Right Reserved.

1 2 3 4 5 6 7 8 9 10