文档章节

CSS控制文字只显示一行,超出部分显示省略号

曾沙
 曾沙
发布于 2012/10/29 12:05
字数 667
阅读 7205
收藏 7

之前使用过这个例子,现在总结说明一下:

先给贴代码:

<p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
      省略我吧! 
      省略我吧! 
      省略我吧!
      省略我吧! 
      省略我吧! 
      省略我吧!
      省略我吧! 
      省略我吧! 
      省略我吧!
      省略我吧! 
      省略我吧! 
      省略我吧!
 </p>

测试浏览器: IE6/7/8/9opera12.02firefox15.0.1chrome21.0.1180.89 m

完整例子:runjs.cn

现在解释一下为什么要这样做:

1、text-overflow: ellipsis; 

这里的重点样式是  text-overflow: ellipsis; 

不过话说text-ellipsis是一个特殊的样式,有关解释是这样的:text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。

简单理解就是我要把文本限制在一行(white-space: nowrap;),肯定这一行是有限制的(width),并且你的溢出的部分要隐藏起来(overflow: hidden;),然后出现省略号( text-overflow: ellipsis)。

我在网上看到有很多人说opera不支持text-overflow,可能因为我用的是最新版本的,已经支持这个属性了,所以没办法测试,不过网上给支持低版本的opera一个办法,就是-o-text-overflow:ellipsis;至于火狐,也有很多人说不支持,版本问题无法考证,大家有试过的可以出来指证一下,这里有个《在火狐里 怎样用CSS限制字数并以点的形式显示》,可以参考一下

2、white-space

顺便解释一下white-space的用法

white-space属性声明建立布局过程中如何处理元素中空白符。(废话一句,这里的空白符应该指我们用键盘敲入的空格或回车,因为用 <br>无论white-space设置什么都会有空格或回车。

下面是wschoolwhite-space可能的值:

normal 默认。空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

pre-wrap 保留空白符序列,但是正常地进行换行。

pre-line 合并空白符序列,但是保留换行符。

inherit 规定应该从父元素继承 white-space 属性的值。


大部分内容来自网络,仅供自己学习理解之用,牛人笑看之。。


© 著作权归作者所有

共有 人打赏支持
曾沙

曾沙

粉丝 359
博文 22
码字总数 8773
作品 0
深圳
网页/平面设计
私信 提问
css设置当字数超过限制后以省略号(...)显示

文字超出一行,省略超出部分,显示'...' 用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。 多行文本溢出显示省略号 注: ①-webkit-line-clamp用来限制在一个块元素...

Mr_C墨城
2017/11/03
0
0
CSS实现文字超出长度隐藏,显示省略号

CSS实现文字超出长度隐藏,显示省略号 表格: table{  table-layout: fixed;}td{   white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;} 本方法用于解决表格单元格内...

lyioris
2014/02/20
0
0
CSS实现单行、多行文本溢出显示省略号(…)

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。 实现方法: overflow: hidden;text-overflow:ellipsis;white-...

ForingY
2015/10/28
0
0
CSS实现文字一行显示带省略号

CSS实现文字一行显示带省略号技术 maybe yes 发表于2015-01-20 11:39 原文链接 : http://blog.lmlphp.com/archives/64 来自 : LMLPHP后院 <style>word-break: keep-all;white-space: nowrap;......

hosser
2015/03/25
0
0
纯css实现多行文本截断

概述 是一个不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。 限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合...

gongzhen
2016/07/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周四乱弹 —— 出现了一个小姐姐舔我?

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @ nnnm : 昨天收到一个分享的英文歌曲,很好听的。本来对于英文歌曲一直不多去琢磨,因为英语学得不好啊!但是这看到首歌的歌词后,才明白:...

小小编辑
16分钟前
76
3
编码规范

4.、编码时的一些建议 1、尽量指定类、方法的final修饰符——虚拟机会想办法内联所有的final方法来减少方法执行时创建栈帧的数量,从而降低栈溢出的风险 2、尽量重用对象——重复new对象会增...

呵呵哒灬
今天
2
0
第一个docker化的java应用

Docker 思想 集装箱 标准化:运输方式/存储方式/API 接口 隔离

BeanHo
今天
1
0
移植Modbus到STM32F103(1):coil、discrete、holding和input的取舍

之前自己给设备写的通信协议,一到工作环境就不停通信错误。思前想后,觉得原因是自己瞎写的协议不好,无法适应有噪音的环境,所以决定移植一个成熟的协议。查了资料,发现Modbus协议简单(容...

Konstantine
今天
0
0
Flutter | 状态管理特别篇——Provide

前言 今天偶然发现在谷歌爸爸的仓库下出现了一个叫做flutter-provide的状态管理框架,2月8日才第一次提交,非常新鲜。在简单上手之后感觉就是一个字——爽!所以今天就跟大家分享一下这个新的...

Vadaski
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部