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：
当对象内文本溢出时显示省略标记（...）

说明：

  1. 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow。
  2. 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>

 

 http://www.spritecow.com

 

posted @ 2012-12-21 17:13  s_p  阅读(485)  评论(0)    收藏  举报