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>

 

你可能感兴趣的:(css3)