13一/090
css写省略号方法
css写省略号方法
- <title>css写省略号方法</title>
- /* CSS DEMO */
- * { margin: 0; padding: 0; }
- a { text-decoration: none; color: #000; }
- a:hover { text-decoration: none; color: #000; }
- ul {
- width: 300px;
- margin: 40px auto;
- padding: 12px 4px 12px 24px;
- border: 1px solid #D4D4D4;
- background: #F1F1F1;
- }
- li { margin: 12px 0; }
- li a {
- display: block;
- width: 220px;
- overflow: hidden;
- white-space: nowrap;
- -o-text-overflow: ellipsis;
- text-overflow: ellipsis;
- }
- /* firefox only */
- li:not(p) {
- clear: both;
- }
- li:not(p) a {
- max-width: 170px;
- float: left;
- }
- li:not(p):after {
- content: "...";
- float: left;
- width: 25px;
- padding-left: 5px;
- color: #000;
- }
- /* XHTML DEMO*/
- <ul>
- <li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li>
- <li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li>
- <li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li>
- <li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li>
- <li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li>
- <li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li>
- <li><a href="#">设计人员必读：影响SEO的页面制作细节</a></li>
- </ul>
