文本溢出显示省略号的CSS兼容方法

最新推荐文章于 2024-11-01 11:00:38 发布

原创最新推荐文章于 2024-11-01 11:00:38 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #Java #XML #HTML

xHTML+CSS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用CSS和XBL实现文本溢出时自动添加省略号的方法。通过特定的样式设置及XML绑定，可以在限定宽度内使超出的内容以省略号形式显示，适用于网页布局中对文字长度有要求的场景。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">   
<html>   
<head>   
<meta http-equiv="content-type" content="text/html; charset=UTF-8">   
<title>ellipsis</title>   
<style>   
.demo{   
    margin:10px;   
    border:1px solid #ccc;    
    float:left;   
    width:115px;   
    overflow:hidden;   
    white-space:nowrap;   
    -o-text-overflow:ellipsis;   
    text-overflow:ellipsis;   
    -moz-binding: url('ellipsis.xml#ellipsis');   
}   
</style>   
</head>   

<body>   
    <div class="demo">   
        short   
    </div>   
    <div class="demo">   
        this is test,this is test,this is test,this is test,this is test,this is test   
    </div>   
</body>   
</html>

另外还有一个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:window>-->   
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>   
            <!--</xul:window>-->   
        </content>   
</binding>   
</bindings>