CSS3--字体样式，自动隐藏一行中多余文字，以省略号显示。 

<!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>Border-radius</title>
<style type="text/css">
#id4div{
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;


text-align:left;
padding:24px;
margin:0;
font-family: helvetica,arial,sans-serif;
color:#000;
background:#000;
font-size:80px;
font-weight:bold;
text-shadow:0 0 4px white,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
border-radius: 111px;

}
#id1div { 
text-align:left;
padding:24px;
margin:0;
font-family: helvetica,arial,sans-serif;
color:#000;
background:#000;
font-size:80px;
font-weight:bold;
text-shadow:0 0 4px white,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
border-radius: 111px;
 } 
 
div.className { 
text-align:left;
padding:24px;
margin:0;
font-family: helvetica,arial,sans-serif;
color:#D1D1D1;
background:#ccc;
font-size:80px;
font-weight:bold;
text-shadow:-1px -1px white,1px 1px #333;
border-radius: 111px; 
 } 
 
 
div.id3div { 
text-align:left;
padding:24px;
margin:0;
font-family: helvetica,arial,sans-serif;
color:#D1D1D1;
background:#ccc;
font-size:80px;
font-weight:bold;
text-shadow:1px 1px white,-1px -1px #333;
border-radius: 111px; 
 } 
 
#text { 
text-align:left;
padding:24px;
line-height:0.5em; 
margin:0;
font-family: helvetica,arial,sans-serif;
height:1px;
color:#999; 
font-size:80px;
font-weight:bold;
text-shadow: 5px -5px 16px #000;
border-radius: 111px; 
 } 
 body{
 background-color: ; 
 }
</style>
</head>
<body>

<div id="id4div">
    自动隐藏多余文字,以省略号形式显示
    <br />text-overflow:clip 不显示省略标记 
    <br />text-overflow:ellipsis  显示省略标记 
    <br />text-overflow:ellipsis-word  显示省略标记 
    <br />white-space:nowrap 强制文本在一行显示
    <br />overflow:hidden  隐藏溢出文本，并显示为省略号 
     
</div>

<div id="id1div">
    <br />ID 指定class样式 ：#id1div{}
    <br />text-overflow:clip 不显示省略标记 
    <br />text-overflow:ellipsis  显示省略标记 
    <br />text-overflow:ellipsis-word  显示省略标记 
    <br />white-space:nowrap 强制文本在一行显示
    <br />overflow:hidden  隐藏溢出文本，并显示为省略号 
    #CCC;灰色
    #000000 黑色
    #666 灰黑
    #ffffff 白色
    #FF0000 红色
    #000066 深蓝
</div>
  <div class="className">
    <br />class="className" 指定class样式 :div.className{}   
    <br />text-shadow:0.1em 0.1em 0.1em #FF0000; 
    <br /> 第一个值：水平位移
    <br /> 第二个值：正数：右下方偏移
                  ：负数：左上方偏移
    <br />  第三个值(可选参数)：表示模糊半径 
    <br />第四个值：阴影的颜色  
</div>
  <div class="id3div"> 
    <br />在Firefox和Safari 3的浏览器里能看到圆角效果  border-radius: 111px; 是圆角属性 
</div>
<div id="text">黑猫警长</div>
</body>
</html>

 

posted on 2013-05-22 15:01  BIGBIRD大鸟  阅读(958)  评论(0)    收藏  举报