css 定位以及文字超长省略
定位：
<html>
<head>
<title></title>
<style type="text/css">
html,body {
overflow:hidden;
margin:0px;
width:100%;
height:100%;
}
.virtual_body {
width:100%;
height:100%;
overflow-y:scroll;
overflow-x:auto;
}
.fixed_div {
position:absolute;
z-index:2008;
bottom:20px;
left:40px;
width:800px;
height:40px;
border:1px solid red;
background:#e5e5e5;
}
</style>
</head>
<body>
<div class="fixed_div">I am still here!</div>
<div class="virtual_body">
<div style="height:1800px;">
I am s_p!
</div>
</div>
</body>
</html>
文字隐藏：
<!DOCTYPE> <html> <head> </head> <body> <table width="550" border="0" cellpadding="5" cellspacing="1" style="table-layout:fixed;"> <tr> <th nowrap bgcolor="#C6D9E7" style="overflow:hidden; text-overflow:ellipsis; color:#FFFFFF;">站长特效一号测试1</th> <th nowrap bgcolor="#C6D9E7" style="overflow:hidden; text-overflow:ellipsis; color:#FFFFFF;">站长特效二号测试2</th> <th nowrap bgcolor="#C6D9E7" style="overflow:hidden; text-overflow:ellipsis; color:#FFFFFF;">站长特效三号测试3</th> </tr> <tr> <td nowrap style="overflow:hidden; text-overflow:ellipsis;">站长特效一号测试1111111！</td> <td nowrap style="overflow:hidden; text-overflow:ellipsis;border-right:1px solid #C6D9E7;">站长特效一号测试22222222</td> <td nowrap style="overflow:hidden; text-overflow:ellipsis;">站长特效一号测试44444444</td> </tr> </table> </body> </html>
强制不换行
white-space:nowrap;
自动换行
word-wrap: break-word;
word-break: normal;
强制英文单词断行
word-break:break-all;
电子狗table td：换行例子
word-break: break-all;
word-wrap: break-word;
/*一行文字溢出省略号*/ .ellipsis-1{overflow:hidden; text-overflow:ellipsis; white-space: nowrap;} /*两行文字溢出省略号*/ .ellipsis-2{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow:hidden;text-overflow:ellipsis;} /*三行文字溢出省略号*/ .ellipsis-3{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow:hidden;text-overflow:ellipsis;} 简单点的方式就是 copy
text-overflow
语法：
text-overflow ： clip | ellipsis
取值：
- clip：
- 不显示省略标记（...），而是简单的裁切。
- ellipsis：
- 当对象内文本溢出时显示省略标记（...）
说明：
- 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow。
- text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>text-overflow</title> </head> <body> <style type="text/css"> .test_demo_clip{text-overflow:clip; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;} .test_demo_ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;} </style> <h2>text-overflow : clip </h2> <div class="test_demo_clip"> 不显示省略标记，而是简单的裁切条 </div> <h2>text-overflow : ellipsis </h2> <div class="test_demo_ellipsis"> 当对象内文本溢出时显示省略标记 </div> </body> </html>
