`
ayue222
  • 浏览: 49645 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

CSSJavaXMLHTML 
阅读更多 
<!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>
分享到：
| 让code在页面上也有行号，高亮显示
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS实现单行、多行文本溢出显示省略号的实现方法.pdf

    在CSS中，文本溢出显示省略号是一种常见的文本处理方式，主要用来在有限的空间内隐藏超出的部分，通常用于文章摘要、评论等场景。这里我们将详细介绍如何使用CSS实现单行和多行文本溢出时显示省略号。 首先，我们来...

    CSS实现单行、多行文本溢出显示省略号的实现方法.docx

    以下是对"CSS实现单行、多行文本溢出显示省略号的实现方法"的详细说明： **单行溢出** 单行溢出的实现主要是通过限制文本的换行，让其在固定宽度内显示，超出的部分用省略号替换。以下是一种常见的实现方式： ```...

    css实现文本溢出显示省略号

    本知识点介绍如何使用CSS实现文本溢出显示省略号的效果。这种方法不仅能够保持页面的整洁性，还可以避免因文本溢出而造成用户界面的混乱。在CSS中，我们可以通过组合几个属性来实现这一效果，包括`white-space`、`...

    CSS实现单行、多行文本溢出显示省略号的实现方法

    在CSS中，实现文本溢出时显示省略号的方法分为单行文本溢出和多行文本溢出两种情况。这两种效果可以有效地处理页面内容超出预设区域时的显示问题，增强用户界面的整洁性。 一、单行文本溢出显示省略号 对于单行...

    纯CSS实现“文本溢出截断省略”的几种方法

    首先，单行文本溢出省略是通过以下CSS代码实现的： ```css .overflow-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } ``` 这种方法的优点是兼容性好，适用于大部分主流浏览器...

    文本溢出时显示省略标记

    此外，对于源码和工具方面，一些前端框架（如Bootstrap）提供了内置的类来实现文本溢出省略，开发者可以通过引入这些库简化工作。而在编程实践中，有时我们还需要处理文本截断的逻辑，例如在数据库存储或API交互时，...

    网页文字溢出显示省略号jQuery插件代码.zip

    网页文字溢出显示省略号是一种常见的网页设计技巧，它能有效地管理长文本，使得页面在有限的空间内保持整洁和可读性。jQuery插件在这个过程中起到了关键的作用，通过JavaScript的强大功能来实现这一效果。本压缩包...

    兼容IE和FF的单行溢出文本显示省略号

    在网页设计中，确保元素在不同的浏览器中呈现一致性是一项重要的任务。本文主要讲解如何实现一个兼容...通过以上步骤，我们可以创建一个在不同浏览器中一致的单行文本溢出省略号效果，提升网页的兼容性和用户体验。

    CSS实现标题文字过长部分显示省略号的方法

    CSS提供了单行文本溢出省略显示的方法，而对于多行文本溢出显示省略号，虽然目前可以依赖Chrome的私有属性，但其在未来可能需要被其他技术替代。在实际开发中，需要根据项目需求和目标用户群体使用的浏览器，来决定...

    纯css控制超出部分省略号显示

    本文将详细介绍如何仅使用CSS来实现文本超出部分用省略号（...）显示的效果。 #### CSS实现原理 1. **`display:block;`**：此属性用于设置元素为块级元素。在本例中，将容器设置为块级元素，以便更好地控制其布局...

    firefox下溢出部分省略号显示

    在CSS（层叠样式表）布局中，"溢出部分省略号显示"是一个常见的文本处理技巧，用于在有限的空间内展示过多的文本内容。在Firefox浏览器中，开发者可以利用CSS属性来实现这一效果，使得当文本内容超出指定区域时，以...

    CSS省略号text-overflow超出溢出显示省略号

    该属性允许我们在文本溢出容器边界时，用省略号（…）来代替被裁剪的文本，从而提供一种优雅的显示效果。 标题和描述中提到的“CSS省略号text-overflow超出溢出显示省略号”是指在CSS样式中利用`text-overflow: ...

    CSS文本超出指定宽度后隐藏并显示为省略号的实现方法

    1. CSS中实现文本溢出显示省略号的基本属性组合： - `text-overflow`: 此属性定义当文本溢出包含元素时如何显示省略标记（即省略号）。有效值包括 `clip`（修剪文本），`ellipsis`（显示省略号来代表被修剪的文本）...

    CSS实现限制字数功能当对象内文本溢出时显示省略标记

    在实现文本溢出省略号功能时，我们通常将其设置为 `nowrap`，这将强制文本在同一行内显示，不允许换行。 ```css white-space: nowrap; ``` `overflow` 属性则用来处理元素内容超出其边框的情况。在这里，我们需要...

    移动端的text-overflow多行文本溢出显示省略号(…)

    综上所述，实现移动端多行文本溢出显示省略号的方法多种多样，可以根据项目需求和浏览器兼容性选择适合的方案。对于WebKit浏览器，`-webkit-line-clamp`是一个快速有效的选择，而针对非WebKit浏览器，则可采用CSS...

    多行文本溢出显示点点点

    CSS是用于控制网页元素样式和布局的语言，而实现多行文本溢出显示点点点主要依赖于CSS的`overflow`、`text-overflow`和`white-space`属性。 1. `overflow`属性：这个属性用于控制内容超出元素边界时的行为。通常，...

    单行文本与多行文本溢出时显示省略号的CSS设置

    此时，CSS（Cascading Style Sheets）提供了一种优雅的解决方案，即在文本溢出时显示省略号，这在单行文本和多行文本中都有应用。本篇将详细讲解如何使用CSS来实现这一功能。 首先，让我们关注单行文本的处理。在...

    css把超出的部分显示为省略号的方法兼容火狐

    标题中的“css把超出的部分显示为省略号的方法兼容火狐”是指在CSS样式中，如何设置文本超出指定宽度时显示省略号，并确保这种方法在Firefox浏览器中也能够正常工作。这种技术通常用于限制长文本在有限的空间内展示...

Magicbox
Global site tag (gtag.js) - Google Analytics