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

直接看看这些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. php无法上传大文件完美解决方案

    php.ini无法上传大文件完美解决办法 1.打开php.ini(打开方式就不用说了,百度一大堆) 2.查找post_max_size 表单提交最大数值,此项不是限制上传单个文件的大小,而是针对整个表 ...

  2. Eclipse常见设置及快捷键使用总结(更新中)

    Eclipse中常见设置: 1.Eclipse在保存时设置自动去掉多余的import和格式化代码 路径: window --> preferences --> java --> Ed ...

  3. UVa 12063 (DP) Zeros and Ones

    题意: 找出长度为n.0和1个数相等.没有前导0且为k的倍数的二进制数的个数. 分析: 这道题要用动态规划来做. 设dp(zeros, ones, mod)为有zeros个0,ones个1,除以k的余 ...

  4. NoSQL 数据库系统对比

    虽然SQL数据库是非常有用的工具,但经历了15年的一支独秀之后垄断即将被打破.这只是时间问题:被迫使用关系数据库,但最终发现不能适应需求的情况不胜枚举. 但是NoSQL数据库之间的不同,远超过两 SQ ...

  5. [反汇编练习] 160个CrackMe之020

    [反汇编练习] 160个CrackMe之020. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...

  6. 对于随机变量的标准差standard deviation、样本标准差sample standard deviation、标准误差standard error的解释

    参考:http://blog.csdn.net/ysuncn/article/details/1749729

  7. crtmpserver流媒体服务器的介绍与搭建

    crtmpserver流媒体服务器的介绍与搭建 (2012-02-29 11:28) 标签:  crtmpserver  C++ RTMP Server  rtmp  Adobe FMS(Flash ...

  8. BOM浏览器对象模型和API速查

    什么是BOMBOM是Browser Object Model的缩写,简称浏览器对象模型BOM提供了独立于内容而与浏览器窗口进行交互的对象由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是wi ...

  9. 零基础编程指南(By Turtle)

    [零.基础] 1.看文章:<程序猿搜索的技巧>(未完成) [一.入门] 学习语言:VB 安装:下载VB6即可 教程:<李天生vb从入门到精通>http://www.xin372 ...

  10. spring3.0.5的aop使用

    spring3.0.5开始支持jpa2.0了,但是最近笔者在使用他的的时候发现了3.0.5的包与2.5.5相比,有所精简.其他外部的包,我们需要自己下载. AOP必须的spring包 org.spri ...