css实现标题缩略成"..."

最新推荐文章于 2024-04-21 18:11:50 发布

Sing-Z

最新推荐文章于 2024-04-21 18:11:50 发布

阅读量906

点赞数

分类专栏： Web开发文章标签： css netbeans generator safari opera 数据库

本文链接：https://blog.youkuaiyun.com/esinzhong/article/details/3246784

版权

Web开发专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用CSS实现文本自动截断并显示省略号的方法，适用于多种浏览器环境，包括IE6、IE7等旧版浏览器。通过设置特定的CSS样式，可以使得超出容器宽度的文本被优雅地截断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现标题缩略成'..."，之前常做的方法是用程序计算字符串长度再截字。这个很烦，有中英文的字符串截出来的长短不一。

下面用CSS来实这个小功能（用IE6、IE7、opera9.6、Safari3.1.2测试通过）。
Html文件如下：

 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<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;
            -moz-binding: url('ellipsis.xml#ellipsis');
            }
        
       
    </style>
</HEAD>
<BODY>
<ul>
<li><a href="#">探索RailsKits──停止编写重复冗余的代码 </a></li>
<li><a href="#">Visual C#中实现DB2数据库的编程 </a></li>
<li><a href="#">NetBeans社区庆祝十周年生日 </a></li>
<li><a href="#">11月6日微软 Tech-ed 归来有感 </a></li>
<li><a href="#">投影软件融合项目</a></li>
</ul>
</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>
 
 