这是一个很简单的组合技,灵活应用省略号。

直接看看这些CSS属性吧。

  第一招是overflow,这个大家都很常见。它规定了当内容溢出元素框发生的事情,一般值就三种,默认的visible,直接修剪掉的hidden,还有产生滚动条的scroll(或者auto)。我们要做这种省略框,自然是要用到hidden属性的。overflow:hidden.

  第二招是white-space,这个大家用的很少。顾名思义就是,处理元素内的空白。一般我们用到的值也就是两种,一种是pre,一种是no-wrap。pre值,当然就和HTML标签里的<pre>一样啦,会保留你的HTML结构内定义的空白符和换行符。这个不是我们做省略号的重点,就不详细说明了(什么?你还没看过,赶紧去W3C看看这个标签吧,很酷的)。我们说一下第二个属性,no-wrap,也就和pre相反,一直不会换行,直到遇到了<br>(换行标签)。下面我们来看看仅仅用no-wrap属性的效果图。看看它是如何不换行的。

  第三招是text-oveflow,这个可是CSS3属性,虽然说它是CSS3属性,可是连IE6也强力支持呢。text-overflow属性有两个值,一个是默认值clip剪裁,一个是ellipsis省略号。第一个剪裁,也没什么好说的啦,就是生硬的切掉!(措词有点...)。那ellipsis就是我们要的好东西,它规定文本溢出元素框会自动转变为省略号,十分美观优雅。

  最后这三个在一起就可以形成省略号的效果,而且缺一不可噢。——即使你文本再长,在元素框里也就成了省略号的渣渣。

  在我做模拟项目的时候,就多次用到了这个属性。防止有人起名字起的特别长,防止影院名字过长。所以这个组合技用在未知文本长度的地方效果各位优秀。

   (能写一篇这样渣渣的经验文也可以看得出,我CSS比JS渣呀,大前端,HTML CSS JS必须齐头并进,特别是酷炫的不得了的CSS3!)

overflow,white-space,text-overflow组合技,省略号!的更多相关文章

  1. dom4j解析xml报错:Nested exception: org.xml.sax.SAXParseException: White space is required between the processing instruction target and data.

    采用dom4j方式解析string类型的xml xml:        String string="<?xmlversion=\"1.0\" encoding=\ ...

  2. Sublime Text shift+ctrl妙用、Sublime Text快捷组合键大全

    Package Control 安装方法 首先通过快捷键 ctrl+` 或者 View > Show Console 打开控制台,然后粘贴相应的 Python 安装代码. 1 :按住shift+ ...

  3. 让超出div内容的显示滚动条:overflow:auto,以及overflow其它属性

    css的属性,以前没用过遇到了,记录一下: 虽然layui本来自带这个处理,但是为了灵活,抛弃layui原有的加载,只是用layui的样样式,就要使用到这个css属性 总结overflow属性: /* ...

  4. White space is required before the encoding pseudo attribute in the XML declaration.

    错误出现的位置: <?xml version="1.0"encoding="UTF-8"?> 正确方式: <?xml version=&quo ...

  5. CSS/CSS3语法新特性笔记

    CSS层叠样式表 三大特性 层叠性:相同的样式会覆盖 继承性:属性可向下继承 优先级:范围越小权重越高 选择器 基础选择器 标签选择器 1 body { 2 color:#fff; 3 } 类选择器 ...

  6. Transact-SQL 数据类型转换

    Syntax   Syntax for CAST: CAST ( expression AS data_type [ ( length ) ] )     Syntax for CONVERT: CO ...

  7. CSS3-文本-text-overflow

    text-overflow 语法: text-overflow : clip | ellipsis 取值说明: 1.clip:表示不显示省略标记(...),而只是简单的裁切,需要在一定的高度范围内配合 ...

  8. overflow 属性

    写在前面的话: 2016年5月4日青年节,作为一名正青春的学生党,开始了博客生涯,励志做个勤奋上进的好青年.幻想着毕业后月薪W+ .走上人生巅峰的职场生活...... 然而 然而 然而 ,自制力有限的 ...

  9. 让图片完全显示出来,应对overflow,以及在背景中完全显示出来

    1.应对overflow <script type="text/javascript"> $('.foo img').css('width','100%');//修正, ...

随机推荐

  1. 关于Hibernate中的Configuration

    Hibernate中,关于从 Configuration中建立一个SessionFactory常用的可以有两种方法,一种是为Configuration提供hibernate.cfg.xml配置文件,还 ...

  2. JAVA使用原始HttpURLConnection发送POST数据

    package com.newflypig.demo; /** * 使用jdk自带的HttpURLConnection向URL发送POST请求并输出响应结果 * 参数使用流传递,并且硬编码为字符串&q ...

  3. UVa 10969 (圆与圆之间的覆盖问题) Sweet Dream

    题意: 有n个按先后顺序放置的不同大小不同位置的圆,求所有可见圆弧的长度. 分析: 这道题应该是大白书上例题 LA 2572 (求可见圆盘的数量) Kanazawa 的加强版,整体框架都差不多. 对于 ...

  4. Jqgrid入门-使用模态对话框编辑表格数据(三)

            Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...

  5. Codeforces Round #269 (Div. 2)

    A 题意:给出6根木棍,如果有4根相同,2根不同,则构成“bear”,如果剩余两个相同,则构成“elephant” 用一个数组分别储存各个数字出现的次数,再判断即可 注意hash[i]==5的时候,也 ...

  6. 为什么多数游戏服务端是用 C++ 来写

    早年开发游戏必须用C++,这没得说,2000-2004年,java还没有nio,其他动态语言不抗重负,只能C/C++能开发出完整可用的游戏服务端.直到2005年,韩国的游戏很多都还是纯C++写服务端, ...

  7. 从MySpace基于.NET平台的六次重构经历感受分布式

    它们拥有的用户和fans之多,大家都很清楚. Myspace是一个基于.NET平台的,而Facebook更多是基于LAMP的.我们来看看MySpace配合.NET+Windows Server 200 ...

  8. angular+rails集成实战

    http://start.jcolemorrison.com/setting-up-an-angularjs-and-rails-4-1-project/ 1. 添加gemgem 'sprockets ...

  9. POJ 2421 Constructing Roads

    题意:要在n个城市之间建造公路,使城市之间能互相联通,告诉每个城市之间建公路的费用,和已经建好的公路,求最小费用. 解法:最小生成树.先把已经建好的边加进去再跑kruskal或者prim什么的. 代码 ...

  10. Android中TabHost嵌套TabHost

    在嵌套TabHost时,先后遇到了以下情况: 问题1:内部TabHos无显示,只显示了其中的一个Activity: 解决:按下文比对主子TabHos的布局文件和java文件并修改: 问题2:如上所做后 ...