css 断行省略号,隐藏,fixed定位

text-overflow(clip | elipsis)(显示省略号| 不显示省略号)

white-space:nowrap 强制文字不断行

word-break:break-all; 和 word-break:break-word;

word-break:break-all;不仅把超出的文字断行还会整齐的排列

word-wrap: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>