一.效果图
二.相关代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>文字隐藏</title>
<style>
div.elli{
border:1px solid;
overflow:hidden;/*内容会被修剪，并且其余内容是不可见的*/
white-space:nowrap;/*强制在一行显示*/
text-overflow:ellipsis;/*显示省略符号来代表被修剪的文本*/
width:200px;
height:20px;
}
div.clip
{
border:1px solid;
overflow:hidden; /*超出部分隐藏*/
white-space:nowrap;/*强制在一行显示*/
text-overflow:clip;
width:200px;
height:20px;
}
div.hide
{
overflow:hidden;
border:1px solid;
width:200px;
height:50px;
}
div.scroll
{
overflow:scroll;/*内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容*/
border:1px solid;
width:200px;
height:50px;
}
</style>
</head>
<body>
<h3 style="color: #98bf21">1.多余文字自动裁剪</h3>
<div class="clip">如果此处的文字较多，将自动裁切裁切裁切裁切</div>
<br>
<h3 style="color: #98bf21">2.多余文字省略号代替</h3>
<div class="elli"><a href="#">如果此处的文字较多，将自动用省略号代替！</a></div>
<br>
<h3 style="color: #98bf21">3.多余文字自动隐藏</h3>
<div class="hide">如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！</div>
<br>
<h3 style="color: #98bf21">4.多余文字出现滚动条</h3>
<div class="scroll">如果此处的文字较多，将出现滚动条！如果此处的文字较多，将出现滚动条！如果此处的文字较多，将出现滚动条！</div>
</body>
</html>
三.名词释义
3.1 overflow
3.2 white-space
3.3 text-overflow