文字超出自动截取为…【笔记】

文字超出自动截取为…【笔记】 web前端 杭州-小白

如何文超出自动截取为…这个呢,练习一下.其实目的不是看代码,而是如何分离类名.如何做到重用性.

练习如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字超出自动截取为...</title>
</head>
<body>
<style>
*{
	margin:0;
	padding:0; 	
}
body{font-family:Arial, Helvetica, sans-serif;}
h2,em{
	font-weight: normal; 
	font-style: normal;
}
.test{
	width:300px;
	margin:10px auto 0 auto;
	border:1px solid #eeeeee;
	padding:5px;
	color:#333333;
}
.test-title{ 
	padding:0 10px;
 	color: red;
}
/*文字超出自动截取为...*/
.text-cut{ 
	display:block;
	width:100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow:hidden;	
}
</style>
<div class="test">
   <h2 class="test-title">
   		<em class="text-cut">In most browsers, clicking on text or an image within the label will give focus to the area.</em>
   </h2>
   <p>What the label does is create an association between its contents and a control on the page. In most browsers, clicking on text or an image within the label will give focus to the area. In the case of a radio button, it will select it and in the case of a checkbox, it'll alternate between the two states (checked and unchecked).</p>
</div>
</body>
</html>

呵呵,小小练习,大大发现.不解释咯.