首页 > 代码库 > css 断行省略号，隐藏，fixed定位
css 断行省略号，隐藏，fixed定位
text-overflow(clip | elipsis)（显示省略号| 不显示省略号）
white-space:nowrap 强制文字不断行
word-break:break-all; 和 word-break:break-word;
word-break:break-all;不仅把超出的文字断行还会整齐的排列
word-break:break-word; 把超出的文字强制断行，其余的不管，
eg:<p>jflllllllllllllllllllfdjvorfijcdksjhvcidjvcij6789009376567899396767462769hauhfuidhjhfeirhfnjunvreahfvbhjvbujhu</p>
.p1{ width:200px; border:1px solid #000; font:14px/24px Arial; word-wrap:break-word;/*word-break:break-all;*/}
省略号：
<p class="p2">房间爱家的富婆俄日法搜顶顶顶顶顶顶顶顶顶顶的巨款HREI发的时刻就分开上档次， 发动机覅开发可可哦靠都快沉客服来得快。</p>
.p2{ width:200px; border:1px solid #000; font:14px/24px Arial;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
盒模型的怪异模式：
box-sizing盒模型解析
content-box 标准盒模型 border-box 怪异模式
width/height=border+padding+content
Border-box 怪异盒模型 width/height=content
可视宽： 元素的内容宽+padding+border
元素的内容宽：元素里可以方内容的宽
怪异模式：可视宽 设置宽度 内容宽 设置宽度-padding-border
在IE6,7,8下不设置文档声明的时候，页面的盒模型解析 就会进入怪异模式
隐藏方式：
1.display：none;
2.visibility:hidden;
eg：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{ width:100px; height:100px; background:red; border:5px solid #333;}
.box1{ display:none;} //隐藏后不保留原来位置，后者补上
.box2{ visibility:hidden;} //隐藏后保留原来位置，
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>
fixed不兼容问题：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
1.
<style type="text/css">
html{ height:100%; overflow:hidden;}
body{ margin:0; height:100%; overflow:auto;}
.box{ height:2000px;}
.div{ width:100px; height:100px; background:red; position:absolute; left:100px; top:100px;}
</style>
2.
<style type="text/css">
.box{ height:2000px;}
.div{ width:100px; height:100px; background:red; position:fixed; left:100px; top:100px;
_position:absolute;_top:expression(eval(document.documentElement.scrollTop+100));//不建议用，建议用js写
}
</style>
</head>
<body>
<div class="box">
<div class="div"></div>
</div>
</body>
</html>
css 断行省略号，隐藏，fixed定位