overflow,white-space,text-overflow组合技,省略号!
这是一个很简单的组合技,灵活应用省略号。
直接看看这些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组合技,省略号!的更多相关文章
- 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=\ ...
- Sublime Text shift+ctrl妙用、Sublime Text快捷组合键大全
Package Control 安装方法 首先通过快捷键 ctrl+` 或者 View > Show Console 打开控制台,然后粘贴相应的 Python 安装代码. 1 :按住shift+ ...
- 让超出div内容的显示滚动条:overflow:auto,以及overflow其它属性
css的属性,以前没用过遇到了,记录一下: 虽然layui本来自带这个处理,但是为了灵活,抛弃layui原有的加载,只是用layui的样样式,就要使用到这个css属性 总结overflow属性: /* ...
- White space is required before the encoding pseudo attribute in the XML declaration.
错误出现的位置: <?xml version="1.0"encoding="UTF-8"?> 正确方式: <?xml version=&quo ...
- CSS/CSS3语法新特性笔记
CSS层叠样式表 三大特性 层叠性:相同的样式会覆盖 继承性:属性可向下继承 优先级:范围越小权重越高 选择器 基础选择器 标签选择器 1 body { 2 color:#fff; 3 } 类选择器 ...
- Transact-SQL 数据类型转换
Syntax Syntax for CAST: CAST ( expression AS data_type [ ( length ) ] ) Syntax for CONVERT: CO ...
- CSS3-文本-text-overflow
text-overflow 语法: text-overflow : clip | ellipsis 取值说明: 1.clip:表示不显示省略标记(...),而只是简单的裁切,需要在一定的高度范围内配合 ...
- overflow 属性
写在前面的话: 2016年5月4日青年节,作为一名正青春的学生党,开始了博客生涯,励志做个勤奋上进的好青年.幻想着毕业后月薪W+ .走上人生巅峰的职场生活...... 然而 然而 然而 ,自制力有限的 ...
- 让图片完全显示出来,应对overflow,以及在背景中完全显示出来
1.应对overflow <script type="text/javascript"> $('.foo img').css('width','100%');//修正, ...
随机推荐
- MariaDB10.2.X-新特性1-支持分析函数
前言:前段时间看到MariaDB10.2出测试版本了,心想有什么新特性玩玩,大家都知道MySQL不支持分析函数,但是MariaDB10.2.X支持分析函数了, 1.表结构 CREATE TABLE ` ...
- python学习中,list/tuple/dict格式化遇到的问题
昨天上了python培训的第一课,学习了基础知识.包括类型和赋值,函数type(),dir(),id(),help()的使用,list/tuple/dict的定义以及内置函数的操作,函数的定义,控制语 ...
- Android studio在真机上进行调试
1.在Android Studio中,把app的默认启动目标改为USB device,点击[app]→[app configuration],在[Target Device]选择[USB device ...
- 2014年百度之星程序设计大赛 - 资格赛 1004 Labyrinth(Dp)
题目链接 题目: Labyrinth Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- hdu3037 Lucas定理
Lucas定理 Lucas(n,m,p)=c(n%p,m%p)* Lucas(n/p,m/p,p),其中lucas(n,m,p)=C(n,m)%p (这里的除号是整除) 证明——百度百科 题意:求n个 ...
- bzoj2245: [SDOI2011]工作安排
费用流. 这道题的模型比较明显,拆点也是很容易看出来的. #include<cstdio> #include<algorithm> #include<cstring> ...
- SharePoint CMAL方式处理的 增,删,查,改
SPContext.Current.Web.Lists["UserInfo"]:获取网站的List,名称是:UserInfo userlist.AddItem():添加数据到Lis ...
- c++实现输入法窗口自定义的代码
#pragma once #include <Windows.h> #include <imm.h> #include <string> #pragma comme ...
- cocos2d-x 滚动文字(二)
http://blog.csdn.net/kuovane/article/details/8131789 首先送上demo,下载地址为:demo下载地址 一,怎么在文字前面空两隔?只需在xml里的文字 ...
- AI 状态机
by AKara 2010-11-11 @ http://blog.csdn.net/akara @ akarachen(at)gmail.com @weibo.com/akaras 一个简单横版游戏 ...