列个工作中用的CSS段落清单,方便随时查看。
对CSS属性的遗忘,一半是对英文涵义不做了解,再者是有些属性不常用,一来二去即便简单的内容,都要反复查找。
- text-decoration 文字装饰
html
<h1>this is heading 1</h1>
<h2>this is heading 2</h2>
<h3>this is heading 3</h3>
<h4>this is heading 4</h4>
css
h1{
// 帽子
text-decoration:overline;
}
h2{
// 腰带
text-decoration:line-through;
}
h3{
// 鞋子
text-decoration:underline;
}
h4{
// 光脚
text-decoration:none;
}
效果见链接text-decoration
- white-space
单独使用,应该算作是一个鸡肋属性,不过遇到需要将文字省略,配合使用,会得到多余文本省略的效果
css
#div1{
white-space:nowrap; // 取消限制,内容不换行
overflow:hidden; // div内容隐藏
text-overflow: ellipsis; // 文本省略
}
适用于新闻摘要,效果见链接 w3schools
normal
正常
nowrap
不换行
pre
不换行-前加空白段
pre-line
换行-前加空白段,暂未用到
pre-wrap
换行-前加空wrap,暂未用到
initial
初始化,同normal
参考链接w3schools
-
text-overflow
clip
意思如其名字,word从中间砍掉,后边的不显示
ellipsis
来,一起学英文,省略号
initial
初始化
效果见链接w3schools writing-mode
20160504更新writing-mode
部分,lr-tb
,tb-rl
最先是ie支持,之后新标准成立后,chrome保留此部分,但不实现此功能,需要使用:
-webkit-writing-mode:vertical-rl
FF一直不能友好支持
参考链接《 CSS Writing Mode 现状》
DEMO演示
维基百科解决办法-最终选用的办法
其他参考CSS 兼容IE和火狐的文字竖排
此方法用于文字写作习惯,属于CSS3,不过ie8+是部分支持一些基本属性:
writing-mode:lr-tb
由左向右,从上到下
writing-mode:tb-rl
从上到下,由右到左
测试
rl-tb
,bt-lr
...都是无效属性,无需再测试。使用时,需要配合
text-align
会得到不同的结果。
效果见下writing-mode
另外,writing-mode
有一些高级用法,使用到SVG
,需要标准浏览器,以后更新,详细见MDN-writing-mode
有关writing-mode
的详细介绍,参见CSS3
Text Moduleword-wrap
允许长单词换行到下一行:
word-wrap: normal|break-word;