`
DepthJava
  • 浏览: 21652 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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

    博客分类:
  • CSS
阅读更多

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

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

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

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

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

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

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

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

    纯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版本浏览器兼容性较差,此效果尤其适合移动端)

    通过css样式控制单元格文本超长省略.doc

    本文将详细讲解如何通过CSS样式来控制单元格中的文本,当文本内容超过单元格宽度时,采用省略号的形式来表示被截断的部分。这个技巧在数据展示、列表视图或者表格中尤其有用,可以有效地防止单元格过宽导致布局混乱...

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

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

    HTML超出文本显示省略号...通过text-overflow实现

    在网页设计中,有时我们需要对过长的文本进行截断,并在结尾处显示省略号,以保持页面的整洁和可读性。HTML中的“超出文本显示省略号”功能正是为此而设计的,它可以通过CSS的`text-overflow`属性来实现。`text-...

    CSS控制html文本溢出

    CSS提供了多种方法来实现这一目标,其中一种常用的技术是通过`text-overflow`、`overflow`以及`white-space`等属性的组合来实现文本溢出时的截断与省略号显示效果。 #### 二、关键概念与属性介绍 ##### 1. `text-...

    多行文本溢出显示省略号

    多行文本溢出显示省略号

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

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

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

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

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

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

Global site tag (gtag.js) - Google Analytics