为什么使用css3
- 字体嵌入
- 防弹式css
- 多栏布局
- 动态UI
控制文本溢出
p{
overflow:hidden;
-ms-text-overfloaw:ellipsis;
text-overflow:ellipsis;
}
text-overflow属性是对当前文本溢出它的容器盒时文本的显示,当设置text-overflow:ellipsis;时,文本的溢出时显示更美观的省略号代替不完美的裁切行为。
word-wrap打破长单词
p{
word-wrap: break-word;
}
word-wrap不是为了更美观把溢出的文本裁剪掉,而是强制单词换行让其刚好在容器内。
控制断字
text-align:justify通常会让你的文本中出现大量的空隙。
css3提出了hyphens属性:
none:禁止所有的断字;
manual:单词断行到单独的行上面,中间只包含断行字符(就像字符或者软连字符,例如“-”)。
auto:在适当的断字处,单词自动断字。为了正常工作,浏览器需要识别出需要断字文本的语言,所以断字只适用于正确的语言标记,你可以在父元素上设置lang属性来声明。
p{
overflow:hidden;
text-overflow:ellipsis;
text--align:justify;
hyphens:auto;
}