.box { -o-text-overflow: ellipsis; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; border: 1px solid black; width: 400px; padding: 20px; cursor: pointer; }
或许你会考虑当鼠标经过时显示全部的文本内容。
#box:hover { white-space: normal; color: rgba(0,0,0,1); background: #e3e3e3; border: 1px solid #666; }
有点奇怪,这看起来并不像是重置text-overflow属性或是停用它,使之生效,在on:hover中我们可以使得white-space的normal属性。现在正常了。
知道吗?您还可以指定自己的字符串,应使用省略号的位置。这样做来修饰要显示的文本字符串。
8、Flexible Box Model
Flexible Box Model将最终使我们远离类似float的困扰。虽然是要给你的头部换一个新的属性,但一旦你这么做了,将终身受益。
做个演示,创建简单的两列布局。
<div> <div> Main content here </div> <aside> Aside content here </aside> </div>
首先我们要设定一个容器,然后指定它的宽和高,即便是没有实质性的内容在里面。
#container { width: 960px; height: 500px; /* just for demo */ background: #e3e3e3; margin: auto; display: -moz-box; display: -webkit-box; display: box; }
接下来分别定义#main和aside的背景色
#main { background: yellow; } aside { background: red; }
出处:蓝色理想
责任编辑:bluehearts
上一页 你需要熟知10个的CSS3属性 [6] 下一页 你需要熟知10个的CSS3属性 [8]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|