文字超出DIV宽度时显时省略号的效果代码,Css代码库,德仔网

代码语言

代码分类

【Css】文字超出DIV宽度时显时省略号的效果

作者:Dezai.CN / 发布于2013/4/25/ 559


	<!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" content="text/html; charset=utf-8" />
	<title>新建文档</title>
	<style>
	* { 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;
	list-style: none;
	}
	li { margin: 12px 0; }
	li a {
	display: block;
	width: 80px;
	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;
	}
	</style>
	</head>
	<body>
	<ul>
	<li><a href="#">网页设计网页设计网页设计</a></li>
	<li><a href="#">网页设计网页设计网页设计</a></li>
	<li><a href="#">网页设计网页设计网页设计</a></li>
	<li><a href="#">网页设计网页设计网页设计</a></li>
	<li><a href="#">网页设计网页设计网页设计</a></li>
	<li><a href="#">网页设计网页设计网页设计</a></li>
	<li><a href="#">网页设计网页设计网页设计</a></li>
	<li><a href="#">网页设计网页设计网页设计</a></li>
	<li><a href="#">网页设计网页设计网页设计</a></li>
	</ul>
	</body>
	</html>

试试其它关键字

　超出DIV宽度　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)