`
hengxing2009
  • 浏览: 90686 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

CSS 单行溢出文本显示省略号...的方法(兼容IE FF)

阅读更多
html代码:
<div>
<p><span>CSS Web Design 我爱CSS-Web标准化 Div+css教程 - www.52css.com</span><p>
</div>

css代码:
div{
width:200px;/*容器的基本定义*/
height:200px;
background-color:#eee;
}

/* IE下的样式 */
p span{
display: block;
width:200px;/*对宽度的定义,根据情况修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

/* FF 下的样式 */
p{clear:both;}
p span{
float:left;
max-width:175px;   /*IE不能解释该属性,而FF可以*/
}
p:after{
content:"...";
}
分享到:
评论

相关推荐

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

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

    CSS实现单行、多行文本溢出显示省略号(…)

    CSS实现单行、多行文本溢出显示省略号(…)示例文档,自行下载查看

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

    这里我们将详细介绍如何使用CSS实现单行和多行文本溢出时显示省略号。 首先,我们来看单行文本溢出的实现。当需要对单行文本进行截断时,可以使用以下CSS样式: ```css { width: xxpx; /* 定义一个宽度 */ ...

    BInyLU#blognews#CSS实现单行、多行文本溢出显示省略号(…)1

    实现方法:效果如图:但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。实现方法:效果如图:适用范围:该方法适用范围广,但文字未

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

     今天介绍的方法兼容IE FF,看下面的详细介绍:  为了更符合实际,用一个div装起要调试的内容,并为这个div定义一个宽度。  例如: css代码: div{width:200px;} html代码: &lt;div&gt;&lt;span&gt;软件开发网-中国网页设计,...

    CSS实现文字多行省略效果.zip_朋友圈文字最后变成省略号

    在给定的“CSS实现多行文字显示省略号效果.zip”压缩包中,包含了一个名为“2.css”的样式表文件,它使用了`-webkit-line-clamp`属性来指定省略的行数,以及一个“1.html.txt”的HTML文件,用于展示这个效果。...

    CSS 省略号 完美解决 鼠标放上显示不能看部分的内容

    CSS 省略号 完美解决 鼠标放上显示不能看部分的内容

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

    复制代码代码如下:&lt;!...&lt;head&gt;&lt;meta charset=”UTF-8″&gt;...当文本对象溢出是显示…,当然也可是设置属性为clip不显示点点点;-o-text-overflow:为了兼容opera浏览器;*/width:200px;overflow:hidd

    CSS文本超出2行就隐藏并且显示省略号

    //溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为...

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

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

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

    网页文字溢出显示省略号是一个常见的需求,尤其是在有限的空间内展示大量文本时。jQuery的dotdotdot.js插件提供了一种优雅的解决方案,能够帮助开发者处理这种情况。这个插件适用于单行和多行文本,当内容超出指定...

    用css截取字符的几种方法详解(css排版隐藏溢出文本).docx

    这种方法适用于需要保持所有文本都在一行内的场景,但无法显示省略号。 3. **使用`display: -webkit-box`和`-webkit-line-clamp`** 对于多行文本的截断,可以利用WebKit浏览器的非标准属性`-webkit-line-clamp`和...

    CSS--文本溢出完美样式

    `会在文本末尾显示省略号,暗示有更多内容。 4. **多行溢出处理**:`text-overflow`默认只处理单行溢出。若需处理多行溢出,可以使用Webkit内核浏览器(如Chrome、Safari)的实验性特性`-webkit-line-clamp`和`-...

    懒人原生纯CSS多(单)行文本溢出用...代替效果

    效果描述: 在文字列表或者文章显示方面,我们经常碰到文字内容超过文本框的情况 这个时候往往需要将多余的文字以...的形式显示出来 ... 之前跟大家推荐过单行... (IE版本浏览器兼容性较差,此效果尤其适合移动端)

    多行文本溢出显示省略号

    多行文本溢出显示省略号

    表格 题头拖动 超出宽度显示省略号(中文亦可) 滚动条 兼容IE,FF,safari

    本话题主要涉及以下几个关键知识点:表格题头的拖动、超出宽度显示省略号、滚动条的使用以及跨浏览器兼容性,特别是针对IE、Firefox(FF)和Safari这三大主流浏览器。 1. **表格题头拖动**:这是一种交互设计特性,...

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

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

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

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

    兼容火狐的溢出省略号

    可以兼容火狐的溢出变省略号可以兼容火狐的溢出变省略号可以兼容火狐的溢出变省略号可以兼容火狐的溢出变省略号

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

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

Global site tag (gtag.js) - Google Analytics