转载

CSS3文本溢出

text-overflow:

1	`text-` `overflow` `:clip \| ellipsis;`

clip：剪切多余的文字。

ellipsis：文本溢出时显示省略标记。

要实现文本溢出剪切显示省略标记，还需要两个属性的配合，并定义文本容器宽度。

text-shadow:ellipsis;

white-space：nowrap; //强制文本在一行显示

overflow:hidden; //溢出内容隐藏

 1 <!DOCTYPE html>  2 <html>  3     <head>  4         <meta charset="utf-8">  5         <title></title>  6         <style>  7             *{padding: 0;margin: 0;}  8             .clearfix:before,.clearfix:after{  9                 display: table;content: ""; 10             } 11             .clearfix:after{ 12                 clear:both; 13                 overflow:hidden; 14             } 15             a:link{text-decoration: none;} 16             a:hover{text-decoration: underline;color:#f30} 17             .wrap{ 18                 width: 350px; 19                 margin: 30px auto; 20             } 21             .wrap dl{ 22                 width: 350px; 23                 border:1px solid #00CCCC; 24                 border-radius: 8px; 25                 box-shadow: 5px 5px 5px #008000; 26             } 27             .wrap dt{ 28                 height: 2em; 29                 line-height: 2em; 30                 padding-left: 5px; 31                 color: #000; 32                 font-weight: bold; 33                 -webkit-border-left-top-radius:8px; 34                 -moz-border-left-top-radius:8px; 35                 border-top-left-radius:8px; 36                 -webkit-border-right-top-radius:8px; 37                 -moz-border-right-top-radius:8px; 38                 border-top-right-radius:8px; 39             } 40             .wrap dd{ 41                 margin: 8px auto; 42                 font-size: 16px; 43             } 44             .wrap ul{ 45                 list-style: none outside none; 46                 padding-left: 24px; 47                 background: url(../img/bg.png) no-repeat 2px 3px; 48             } 49             .wrap li { 50                   51                 display: inline; 52             } 53             .wrap li a{ 54                 width: 220px; 55                 float: left; 56                 overflow: hidden; 57                 text-overflow: ellipsis; 58                 white-space: nowrap; 59             } 60             .wrap span{ 61                 float: right; 62                 padding-right: 5px; 63             } 64         </style> 65     </head> 66     <body> 67         <div class="wrap clearfix"> 68             <dl> 69                 <dt>今日热点</dt> 70                 <dd> 71                     <ul class="clearfix"> 72                         <li><a href="http://www.cnblogs.com/staven/">访美首站为何选在西雅图？</a><span>2015-09-17</span></li> 73                         <li><a href="http://www.cnblogs.com/staven/">三项目受关注：中国参建美高铁 中国领袖亮相联合国</a><span>2015-09-17</span></li> 74                         <li><a href="http://www.cnblogs.com/staven/">美甲师用得着政府发证吗？竟然还细分五级！</a><span>2015-09-17</span></li> 75                         <li><a href="http://www.cnblogs.com/staven/">男孩带闹钟上学被当炸弹 奥巴马：来白宫玩吧</a><span>2015-09-17</span></li> 76                     </ul> 77                 </dd> 78             </dl> 79         </div> 80           81     </body> 82 </html>