文字超出自动截取为…【笔记】 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>
呵呵,小小练习,大大发现.不解释咯.