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!)

时间: 2024-10-13 10:07:20

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

Java文法(3)—— White Space

------------------------------------------------------------------------------- 说明: White space is defined as the ASCII space character, horizontal tab character, form feed character, and line terminator characters (§3.4). ---------------------------

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=\"UTF-8\"?><ROOT><HEAD><INFO><BUSINESSNO>T065205072015000097</BUSINESSNO><BUSINESSTYPE>T</BUSINESSTYPE&g

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

Package Control 安装方法 首先通过快捷键 ctrl+` 或者 View > Show Console 打开控制台,然后粘贴相应的 Python 安装代码. 1 :按住shift+ctrl然后按←或→可快速选中一行中的某一部分,相当于双击鼠标选中. 当你想在代码末尾加注释的话,这个方法很好用 输入文字->光标移到文字末尾->按住shift+ctrl+←便会选中文字->其他操作:删除.注释(ctrl+/)等等. 2:shift+ctrl键组合+↑↓.可实现类似鼠标选中之

高级组合技打造“完美” 捆绑后门

0x00 简介 之前写过一篇关于客户端钓鱼的文章:<使用powershell Client进行有效钓鱼>中,在使用各个Client进行测试的过程中,个人发现CHM文件是最好用的一个,但是其缺点就是会弹黑框,这样就会让被攻击者察觉.那么怎么让他不弹黑框呢?那就是本文要介绍的内容啦~ 0x01 CHM 简介 在介绍怎么使用CHM来作为后门之前,首先要知道CMH是什么东西. CHM(Compiled Help Manual)即“已编译的帮助文件”.它是微软新一代的帮助文件格式,利用HTML作源文,把

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

错误出现的位置: <?xml version="1.0"encoding="UTF-8"?> 正确方式: <?xml version="1.0" encoding="UTF-8"?> 错误原因:标签中的属相间需要用空格区分开

CSS 2 文本⑤

在实际的设计过程中 ,为了排版的好看 ,比如上面这行字 ,经常有这样的需求 ,当放不下的时候,我们会让它显示 ···· 那么这个.... 用css怎么实现呢 ?  我们可以用 text - overflow text - overflow text - overflow : clip | ellipsis clip : 默认值 ellipsis: 省略号 overflow : hidden ;   溢出的时候把它截掉,如果没有这个,溢出的时候不截掉,那text-overflow就不起作用了 wh

php实现word转html文档的例子

php实现word转html文档的例子 2015-10-16 17:07 2751人阅读 评论(2) 收藏 举报 word文档不适合放到网页上了,如果我们要放到网页中去是需要一个个复制了,如果你还在复制就out了,下文小编来为各位整理一篇php实现word转html文档的例子,希望文章对各位有帮助. 要想完美解决,office转pdf或者html,最好还是用windows office软件,libreoffice不能完美转换,wps没有api. 先确认com模块是不是开启,phpinfo里面如果

overflow解决float浮动后高度自适应问题

也许你在做网页的时候发现,发一个区块内的元素被应用了float之后,那么整个box的高度对就不以被浮动对象的高度为标准了.如图中的城市导航内的城市列表中采用了float之后,那个外框的高度并不是内容元素的高度: 怎么解决这个问题呢?经发现可以采用overflow来解决!方法是在父元素加上如下代码即可 overflow:auto; zoom:1; overflow:auto;是让高度自适应, zoom:1;是为了兼容IE6,也可以用height:1%;的方式来解决. 1 1 <!DOCTYPE h

CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}

常用的清除浮动的方法有以下三种: 此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景 <!DOCTYPE html><html><head> <meta charset="utf-8"/> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body { font: 36px bold; c