text-overflow:ellipsis实现css文本溢出省略号

在ie中我们只要简单的利用text-overflow 这个 CSS 属性实现文本溢出省略号。

例

 代码如下 复制代码

.entry_title{
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

但是在ie之外的浏览器就不行了，不过大家可利用php mb_strimwidth，也是按照 中文 2 个字节，英文 1 个字节 方式计算之后的，并且如果字数超过截取的要求，这个函数还可以在最后面自动添加‘…’。

 代码如下 复制代码

mb_strimwidth($post_excerpt,0,240,'...','utf-8');

注意，最后添加‘utf-8’编码参数，可以避免中文截取乱码的问题。

时间： 2024-08-03 09:02:37

text-overflow:ellipsis实现css文本溢出省略号的相关文章

css 文字溢出省略号样式代码

例,原本以为文字溢出的处理比较复杂,没想到这么一简简单单的一句话就搞定了,css真是神奇:  代码如下 复制代码 .li { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } 这只是使用了CSS中text-overflow属性,这个属性比较特殊,在现在的CSS手册中找不到,但CSS3中有相关的描述:text-overflow-mode. 它有三个值:clip.ellipsis.ellipsis-word. clip : 不显

CSS/Js文本溢出自动添加省略号ellipsis

  CSS文本溢出省略号 text-overflow:ellipsis ext-overflow是一个比较特殊的属性,W3C早前的文档中(目前的文档中没有包含text-overflow属性,FML!)对其的定义是: Name: text-overflow-mode Value: clip | ellipsis | ellipsis-word clip : 不显示省略标记(-),而是简单的裁切 ellipsis : 当对象内文本溢出时显示省略标记(-),省略标记插入的位置是最后一个字符. elli

如何继续截取长文本显示省略号（多行）

记得第一篇博客写过单行文本溢出显示省略号,今天就来说说多行文本溢出怎么显示省略号吧 其实也是前些日子做移动端的页面接到这么个需求,本来以为这没法实现,同事跟我说-webkit-line-clamp属性可以,就去查了查,果然 Pc端基本不会有这种需求,因为这个方法兼容性太差,浏览器份额不是webkit占大头(特别是天朝),看前缀就知道只支持webkit内核,他属于webkit内部属性,和-webkit-text-size-adjust: none(这个Pc端已经不在支持,移动端还可以使用)类似,但

Js与css实现文本溢出自动添加省略号方法总结

1.常规css方法--可以实现IE,Safari,chrome,opera浏览器下文字溢出省略号表示 这是一段测试文字,主要是用来测试文字溢出后是否会用省略号显示.  代码如下 复制代码 .zxx_text_overflow_1{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;} 2.使用ellipsis.xml文件使Firefox支持文字溢出后点

css 单行文本溢出显示省略号解决办法

样式代码,四个属性都是必须的,并且宽度必须设在当前容器上,父容器定宽无效:  代码如下 复制代码 .box {  width: 200px;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; } 测试 IE6.IE7.IE8.IE9.Chrome.Firefox 均支持. 测试实例  代码如下 复制代码 <!DOCTYPE HTML> <html> <head>  <meta ch

css 溢出文本显示省略号各种方法总结

语法: text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(...),而是简单的裁切 (clip这个参数是不常用的!) ellipsis : 当对象内文本溢出时显示省略标记(...) 说明: 设置或检索是否使用一个省略标记(...)标示对象内文本的溢出. 请您注意,text-overflow:ellipsis属性在FF中是没有效果的. 示例: div { text-overflow : clip; } text-overflow是一个比较特殊的样

CSS超出文本用省略号显示 兼容firefox IE6 IE7

CSS设置文本溢出不显示或显示省略号,只显示一定长度的文本,ie9下只需设置  代码如下 复制代码 div{white-space:nowrap;text-overflow: none;} 或  代码如下 复制代码 div{white-space:nowrap;text-overflow: ellIPsis;} 即可,在ie6,ie7需增加宽度设置才能生效  代码如下 复制代码 div{white-space:nowrap;text-overflow: ellipsis;*width:100px

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

HTML超出文本显示省略号在一些新闻列表中还是比较常见的一种做法,其实很简单通过text-overflow便可实现,有需要的朋友可以参考下本文   需要对div或者span同时应用Css: 复制代码 代码如下: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 即可实现所想要得到的溢出文本显示省略号效果. 当然了你的页面元素要设置固定的宽度,超出了宽度才会显示.         注:更多精彩教程请关注三联网页设计教程 栏目,

纯CSS文本阴影效果实现

css CSS2中的text-shadow属性能够很容易的给web页面中的文本添加阴影,但是到目前为止只有OS X的Safari浏览器支持它,今天,我们将为其他浏览器创建CSS文本阴影效果,包括Firefox. 讨论了多年的text-shadow属性可以让你控制页面元素阴影的颜色.偏移量及模糊度,尽管其还未被广泛支持,但是某些设计师已经开始决定在任意地方使用CSS text-shadows属性了.尽管这只是为很少数量的用户增强性设计. CSS Text-Shadows Safari实现 如果你使