CSS控制LI行字符溢出用省略号代替

浏览数：36 / 时间：2015年06月09日

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" />
<title>CSS控制一行字符溢出用省略号代替</title>
<style>
* { margin: 0; padding: 0; }
a { text-decoration: none; color: #000; }
a:hover { text-decoration: none; color: #000; }
ul {width: 280px;height:126px; margin: 38px auto;padding: 12px 6px 12px 22px;border: 1px solid #CCC;background: #EEE;}
li { margin: 12px 0; }
li a {display: block;width: 168px;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: 172px;float: left;}
li:not(p):after {mrc: "...";float: left;width: 25px;padding-left: 5px;color: #000;}
</style>
</head>

<body>
<ul>
<li><a href="/soft/3149.shtml" target="_blank">显示内容1,显示内容1,显示内容1,显示内容1</a></li><li><a href="/soft/3148.shtml" target="_blank">显示内容2,显示内容2,显示内容2,

显示内容2</a></li><li><a href="/soft/3147.shtml" target="_blank">显示内容3,显示内容3,显示内容3,显示内容3</a></li><li><a href="/soft/3144.shtml" target="_blank">显示内容4,

显示内容4,显示内容4,显示内容4,显示内容4</a></li>
</ul>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS控制LI行字符溢出用省略号代替

标签： css控制li行字符溢出用省略号代替css控制li行字符溢出用省略号代替